[React] 리액트 패키지 구성 요소와 용어 정의

※ 해당 내용은 유투브 채널 '가장 쉬운 웹개발 with Boaz' 의 React 까보기 시리즈를 듣고 정리한 내용입니다. 

 

🍏 0. Intro

리액트 아키텍쳐의 변화가 있었다. 

16v 이전에는 stack 아키텍쳐를 사용하다가 fiber로 변경되었고, 18v에서 본격적으로 사용하게 되었다. 

stack은 후입선출의 자료구조이지만, fiber는 들어간 순서와는 무관하게 꺼낼 수 있다는 점이 가장 큰 차이점이다.

 

React에서 '꺼낸다'라는 의미는 'DOM 에 변화를 적용한다'라고 이해할 수 있는데, stack을 사용하면 순서가 고정되게 되고, 이렇게 되면 렌더링 할 때의 순서를 유연하게 가져갈 수 없다. 그래서 보다 렌더링 순서를 조정하기 위해서 fiber라는 아키텍쳐로 변화했다. 

 

 

🍎 1. 패키지 구성 요소

react

- react 코어.

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

- 다른 패키지에 의존도를 갖고 있지 않기 때문에 여러 플랫폼(브라우저, 모바일)에 올려서 사용할 수 있다.

 

renderer

- react-dom, react-native-dom 등 호스트 렌더링 환경에 의존적인 패키지.

- 호스트와 react를 연결하는 역할.

- reconciler 와 legacy-event 패키지에 의존도를 가지고 있다.

 

event(legacy-event)

- SyntheticEvent라는 명칭으로, 내부적으로 개발된 이벤트 시스템.

- 기본 웹에서의 event를 wrapping 하여 추가적인 기능 수행을 할 수 있게 한다.

- 이벤트 풀링, 이벤트 위임 등을 사용하여 구현됨.

 

scheduler

- react는 task를 비동기로 실행

- 이 task의 실행 타이밍을 알고 있는 것이 schedular이며 비동기 실행을 담당

- 호스트 환경에 의존적

 

reconciler

- 리액트의 핵심 패키지

- v15이전에는 스택 기반의 구현이었지만 v16 이후부터 fiber 아키텍쳐를 도입

- fiber 아키텍쳐에서 VDOM 재조정을 수행

- 컴포넌트를 호출하는 곳

 

🍊 2. 용어

렌더링

- reconciler에서 컴포넌트를 호출하면 react element을 return 한다. 이 react element를  VDOM에 적용(재조정)하는 것까지를 렌더링이라고 한다. 

 

cf) 전체 과정

- 컴포넌트 호출로 return된 react element를 VDOM에 재조정 (: 렌더링)

- renderer가 컴포넌트 정보를 DOM에 삽입 (: mount)

- 브라우저가 DOM 을 paint (: paint)

 

react element

- 컴포넌트 호출 시 return 하는 것

(return 된 JSX 는 babel을 통해 react.createElement()를 호출하여 이로부터 return 받는 것이 react element)

- 컴포넌트의 정보 (DOM 에 삽입 될 내용)을 담은 객체

- type, key, props, ref 등의 정보를 가지고 있음.

{
  type: 'button',
  props: {
    className: 'button button-blue',
    children: {
      type: 'b',
      props: {
        children: 'OK!'
      }
    }
  }
}
<button class='button button-blue'>
  <b>
    OK!
  </b>
</button>

 

 

fiber

- VDOM의 노드 객체. (아키텍쳐의 이름과 동일하지만 다른 의미)

- React element가 DOM에 반영되기 위해서는 먼저 VDOM에 추가되어야하는데 이를 위해 확장한 객체임.

- 컴포넌트의 상태, 훅, 라이프 사이클 등이 추가된 JS 객체.