gmlwlsl 님의 블로그

리액트에서 상태 관리를 고민하다 보면 가장 먼저 마주치는 도구가 바로 Context API이다. 라이브러리를 설치하지 않아도 되기 때문에 부담 없이 도입할 수 있지만, 성능적인 관점에서는 몇 가지 분명한 한계가 있다. 특히 모든 하위 컴포넌트가 리렌더링 되는 구조는 많은 리액트 유저들이 경험하는 대표적인 병목 포인트이다. 1. Context API의 기본 구조Context API는 전역 상태처럼 값을 여러 컴포넌트에 공유하기 위한 수단이다. createContext로 컨텍스트 객체를 만들고Provider를 통해 값을 하위 트리에 공급한다하위 컴포넌트에서는 useContext로 값을 꺼내 쓴다.예시 구조는 다음과 같다.const MyContext = createContext(value); 이때 som..

리액트를 사용하다 보면, 컴포넌트가 언제 리렌더링 되는지,useEffect가 왜 다시 실행되는지, React.memo, useCallback이 왜 필요한지 등 다양한 궁금증이 생긴다. 이 모든 흐름은 자바스크립트의 동등 비교, 그리고 리액트의 내부 구조인 Fiber와 연결되어 있다. 1. 자바스크립트의 동등 비교자바스크립트의 대부분의 타입은 객체 타입(참조 타입)이다.배열, 함수, 정규식, 클래스 등도 모두 객체이다.반면, boolean, null, undefined, string, number 등은 원시 타입(primitive type)이다.객체는 값을 저장하는 것이 아니라, 메모리의 주소(참조)를 저장한다.따라서 같은 값을 갖더라도, 서로 다른 객체는 ===로 비교하면 false가 나온다.const ..

⚠️ Errorboundary&suspenseSuspense란children의 로딩이 완료될 때까지 다른 컴포넌트를 대신 보여줄 수 있게 해줌 비동기로 데이터를 가져오는 작업에서 활용도가 높음 어떤 컴포넌트가 필요한 데이터가 아직 준비 안 됐음을 리액트에게 알려줌👉🏻 데이터가 로딩 중일 때 UI를 표시 Suspense의 기능컨텐츠를 한번에 공개함Suspense의 children 중 하나라도 데이터가 준비되지 않으면 fallback 컴포넌트를 보여줌가장 가까운 상위 Suspense의 fallback을 표시여러 Suspense를 중첩해서 로딩 시퀀스를 만들 수도 있음컴포넌트가 데이터를 읽는 중일 땐 가장 가까운 상위 Suspense의 fallback이 보여짐useDeferredValue (새로운 컨텐트가..