React 톺아보기를 보고 정리하기_1

 

1. Preview

이 글은 리액트 사용법에 대한 글이 아니다. 리액트를 통해 프로젝트를 진행한 경험이 있고 동작 방식을 어렴풋이 이해하기는 하지만 여전히 리액트가 마법처럼 느껴지고 응용 에러 디버깅 등에 어려움을 겪는 사람들을 위해 작성되었다.

시리즈의 내용은 사용자의 상호 작용으로부터 훅을 통해 컴포넌트가 업데이트되고 DOM에 마운트되기 까지의 일련의 과정을 실제 코드를 통해 분석해 나가게 될 것이다. 코드에 변형을 가하지 않고 코드 그대로 변수 하나하나 뭣을 위해 선언되었는지 A-Z 까지 알아보자.

시리즈 끝에는 아래 질문들의 답을 파악하도록 하자.

1. Virtual DOM이 무엇인지
2. 컴포넌트 상태가 바뀌었을 때 리액트는 어떻게 해당 컴포넌트를 리-렌더링시키는지
3. 어떻게 변경된 부분만 DOM에 마운트 되는지,
4. hook은 컴포넌트와 어떤 방식으로 매핑되어 사용되는지,
5. 이벤트 구현은 어떻게 되어 있는지

들어가기 앞서 코드를 분석할 때는 필히 분석 대상이 어떤 패키지 밑에 있는 것이고 모듈 함수 이름은 무엇인지 먼저 보고 머리에 담아둔 상태로 코드를 보길 바란다. 리액트는 역할 별로 많은 모듈과 동작에 맞는 함수들을 만들어 놓았다. 코드만 보고 넘어가게 된다면 리액트의 구조로 코드를 바라보기가 어렵다. 이는 추후 지금 내가 어디를 보고 있고 어떠한 흐름으로 여기까지 왔는지 이해하기 힘들다.

2. 패키지 구조

리액트는 React코어, 플랫폼과 관련된 renderer, VDOM과 관련된 reconciler, 비동기 실행기인 schduler 그리고 event로 나눌 수 있다.

React

컴포넌트 정의와 관련된 패키지이다.

대표적으로 React element를 만드는 createElement()와 개발자에게 다른 패키지의 모듈을 제공하는 중간 다리 역할을 하고 있다. 해당 패키지는 다른 패키지에 의존도를 가지고 있지 않기 때문에 여러 플랫폼에 올려서 사용할 수 있다.

Renderer

react-dom, react-native-renderer 등 호스트 렌더링 환경에 의존적인 패키지이다. 호스트와 react를 연결하는 역할을 한다. reconciler와 legacy-event 패키지에 의존도를 가진다.

Event(legacy-events)

SyntheticEvent 라는 명칭으로 내부적으로 개발된 이벤트 시스템이다. 개발자가 event를 사용하기 전 리액트에서 추가적인 제어를 하기 위해 호스트 event를 wrapping 하며 이벤트 풀링, 이벤트 위임 등을 사용하여 구현되어 있다.

Scheduler

리액트는 여러가지 이유로 작업을 비동기로 실행시켜야 한다. 이 작업은 Task란 이름으로 우선순위에 따라 스케줄링 된다. Task 실행하기에 가장 적기인 때를 알고 있는 것이 schduler이며 리액트는 비동기 실행의 책임을 전문가인 scheduler에게 위임한다. 이 패키지는 호스트 환경에 의존적이다.

Reconciler

리액트의 핵심 패키지이다.

그만큼 여러 고민과 노력들이 묻어 있으며 이 시리즈에서 가장 많은 시간을 보내게 될 것이다. v15 이전에는 스택 기반 구현이었다면 v16부터는 오랜 기간 연구 끝에 fiber architecture를 도입했다.

3. 혼동되는 용어 정리

컴포넌트 구분

리액트에서 자체 제공하는 컴포넌트, 사용자 정의 컴포넌트, 플랫폼 컴포넌트로 구분할 수 있으며 아래와 같이 명칭해보자.

• 자체 제공하는 컴포넌트를 스태틱 컴포넌트
• 플랫폼 컨포넌트를 호스트 컴포넌트
• 사용자 정의 컴포넌트를 커스텀 컴포넌트

렌더링

일반적으로 컴포넌트 렌더링이라 하면 컴포넌트 호출을 떠올린다. 하지만 세부 구현 사항으로 내려가면 여러 단계가 더 존재하기 때문에 용어 호동을 방지하기 위해 좀 더 세분화 하자.

컴포넌트 호출은 reconcier에서 한다. 그 후 vdom 재조정 작업이 들어가고 renderer를 이용하여 dom에 마운트한다. 컴포넌트 호출과 dom 삽입은 별개이다.그리고 리액트에서는 dom 삽입과 화면에 그려지는 것 또한 별개로 다룬다.

앞으로 렌더링은 컴포넌트가 호출되어 자식을 반환하고 vdom에 적용하는 일련의 과정을 일컫는다. DOM 작업은 제외이다. 컴포넌트 호출은 그저 함수 호출 로만 생각하자. React element를 반환한다. 그이상 그이하도 아니다. 또한 컴포넌트를 DOM에 삽입하는 것을 마운트, 브라우저가 화면에 그리는 걸 페인트라고 정의한다.

VirtualDOM (이하 VDOM)

1. reactElement, fiber
   1. reactElement는 컴포넌트의 정보를 담은 모델 객체이다. 컴포넌트가 반환하는 것은 JSX가 아닌 이 ReactElement이다.
   2. fiber는 VDOM의 노드 객체이다. 이 객체는 ReactElement를 VDOM에 올리기 위해 확장한 객체이다. fiber를 통해 컴포넌트의 상태, 훅, 라이프 사이클이 대부분 관리된다.
2. current, workInProgress
3. 리액트는 더블 버퍼링 형태로 VDOM을 설계했다. current는 마운트가 끝난 트리이며 workInProgress는 업데이트가 적용중인 트리이다.

 

출처

- Preview