React

리액트를 처음 접하면 듣는 용어 중 하나가 바로 Virtual DOM이다. "리액트는 가상 돔(Virtual DOM)을 이용해서 렌더링작업을 한다" "가상 돔을 만들면 기존의 실제 돔과 비교해서 변경이 발생한 부분만 렌더링이 일어나도록 한다." 리액

React Element와 Fiber의 구성과 목적에 대해 알아보았다

리액트가 첫 렌더링을 하는 과정을 코드를 보면서 단계들을 분석해보려고 한다. 모든 코드를 살펴보진 않고 렌더링의 핵심이 되는 로직들만 보도록 하겠다. 처음 렌더링의 시작은 index.tsx에서 시작한다. index.html에는 root라는 id를 가진 div태그가

scheduler의 scheduleCallback함수를 이어서 보겠다. 우선순위에 따라 expirationTime을 설정하고 새로운 Task를 생성해 Scheduler.js에 전역으로 선언된 taskQueue에 넣어준다. !isHostCallbackScheduled

리액트 초기 렌더링을 직접 디버깅하면서 과정들을 적어봤다. 과정들이 생각보다 복잡한 것같아서 핵심 로직들만 따로 정리해보고자 한다.리액트는 크게 reconciler와 scheduler로 구분되어 렌더링이 진행된다.reconciler는 VDOM에 관한 모든 것과 렌더링

React에서 가장 대표적인 Hook인 useState를 디버깅하면서 이해해 보려한다. 간단한 input을 만들어 useState로 상태변화를 주었다. 먼저 mount될 때의 useState부터 보겠다 useState는 dispatcher에서 오는데 이 dis

useEffect는 React 공식문서에 따르면 Side Effect를 관리하기 위한 hook이라고 설명되어있다. > Side Effect: 주어진 컴포넌트 외부에 존재하는 데이터들이 내부의 데이터에 의해 값이 변경되는 일 Side Effect의 예시들로 데이터

React에서 최적화를 위한 캐싱 장치들을 공부해보겠다. 대표적으로 memo, useMemo, useCallback가 있는데 이들의 목적은 불필요한 연산 반복을 방지하기 위해 메모이제이션을 통해 리렌더링을 막아주는 역할을 한다. 작동원리 useMemo 컴포넌트