이전에 간단하게 Context를 사용한 예시에 대해서 글을 적었는데, 또 많은 부분을 공부하게 되어서 추가적으로 적어보는 시간을 가지려고 합니다.❓ Context란?컨텍스트 개념을 리액트에선 이렇게 설명합니다.보통의 경우 부모 컴포넌트에서 자식 컴포넌트로 props를 통해 정보를 전달합니다. 그러나 중간에 많은 컴포넌트를 거쳐야 하거나, 애플리케이션의 많은 컴포넌트에서 동일한 정보가 필요한 경우에는 props를 전달하는 것이 번거롭고 불편할 수 있습니다. Context를 사용하면 명시적으로 props를 전달해주지 않아도 부모 컴포넌트가 트리에 있는 어떤 자식 컴포넌트에서나 (얼마나 깊게 있든지 간에) 정보를 사용할 수 있습니다.즉 drilling의 문제를 해결하기 위한 개념이라고 생각됩니다.❗️ 사용법C..
1️⃣ 왜 vite를 사용해야 하는가?esm지원 이전, 소스 모듈을 브라우저에서 실행할 수 있는 파일로 변경하는 번들링이라는 작업을 수행했다. → webpack을 통해 번들링 하면 index.js라는 파일 하나로 만들어 지는 것을 알 것이다.JavaScript 모듈의 개수도 극적으로 증가하는 요즘, JavaScript 기반의 도구는 성능 병목 현상이 발생 되었다.Rollup을 이용한 번들링.webpack과 다르게 코드들을 동일한 수준으로 호이스팅 한 후 한 번에 번들링을 진행하기 때문에 속도에서는 webpack보다 빠르고 결과물도 훨씬 가볍다. → 번들링 속도와 용량에 이점es 모듈 형태로 빌드를 할 수 있어 라이브러리나 패키지를 작업하는데 활용할 수 있다. webpack은 es 모듈로 번들을 할 수 없..
리액트에서 제공하는 API 중 useMemo, useCallback 훅과 고차 컴포넌트인 memo를 사용해 리엑트에서의 렌더링을 최소한으로 줄일 수 있다. 이러한 렌더링 최적화 기법을 메모이제이션 기법이라고 한다. → 렌더링 비용과 메모이제이션 비용 중 어떤 게 더 비싼가라는 질문이 등장 일부 컴포넌트에서는 메모이제이션을 하는 것이 성능에 도움이 된다. 우리는 두 가지 선택권이 있다. memo를 컴포넌트의 사용에 따라 잘 살펴보고 일부에만 적용하는 방법 memo를 일단 다 적용하는 방법 1️⃣ 섣부른 최적화는 독이다. 필요한 곳에서만 메모이제이션 하자. 이상적인 상황이다. 메모이제이션 역시 어디까지나 비용이 발생하는 작업이다. 따라서 최적화가 필요한 곳에서만 사용해야 한다. 값을 비교하고 렌더링 또는 재..
리액트의 렌더링은 브라우저가 렌더링에 필요한 DOM 트리를 만드는 과정을 의미한다. 이 렌더링 과정은 시간과 리소스를 소비해 수행하는 과정이다. 이 비용은 모두 웹 애플리케이션을 방문하는 사용자에게 청구되며, 시간이 길고 복잡해질 수록 사용성을 저해한다. 때문에 개발자는 렌더링 과정을 최소한으로 줄이기 위하여 렌더링 과정을 잘 숙지하고 있어야 한다. 1️⃣ 리액트의 렌더링이란? 브라우저에서도 사용되는 용어이므로 두 가지를 혼동해서 사용해선 안된다. 리액트에서의 렌더링이란 리액트 애플리케이션 트리 안에 있는 모든 컴포넌트들이 현재 자신들이 가지고 있는 props와 state의 값을 기반으로 어떻게 UI를 구성하고, 이를 바탕으로 어떤 DOM 결과를 브라우저에 제공할 것인지 계산하는 일련의 과정을 의미한다...
1️⃣ 클래스 컴포넌트 import React from "react"; class SampleComponent extends React.Component { render() { return Sample Component; } } 오래된 코드의 유지보수, 오래된 라이브러리를 사용할 때 도움을 얻기 위해서 기본적인 클래스 컴포넌트의 이해가 필요하다. 다음과 같은 클래스를 상속받아 컴포넌트를 만들 수 있다. React.Component React.PureComponent 이 둘의 차이점은 shouldComponentUpdate 를 다루는 데 있다. import React from 'react'; //Prop 타입 정의 interface SampleProps { required?: boolean; text: s..
🚀 가상 DOM과 리액트 파이버 리액트의 특징은 바로 가상DOM이다. 이 가상DOM이 왜 만들어졌는지, 실제 DOM과 어떤 차이가 있는지 알아보도록 하자. 1️⃣ DOM과 브라우저 렌더링 과정 브라우저는 Navigation과정을 통해 주소에 해당하는 서버에 HTML파일을 요청하고 다운로드 한다. 브라우저의 렌더링 엔진에 의해 DOM과 CSSOM이 만들어지고, 자바스크립트 엔진을 통해 AST가 만들어진다. AST는 DOM과 CSSOM에 적용되고, 이 DOM과 CSSOM은 결합하여 RenderTree가 만들어진다. 브라우저의 렌더링 엔진에 의해 레이아웃과 페인트 과정을 통해서 픽셀 단위로 화면에 뿌려지게 된다. 2️⃣ 가상 DOM의 탄생 배경 브라우저가 웹페이지를 렌더링하는 과정은 매우 복잡하고 많은 비용이..