[TIL] React 패키지의 구성 요소 & 용어

cjkangme·2023년 8월 22일

목록 보기

25/35

참고 자료
[React 까보기 시리즈] React 구성요소인 reconciler, renderer 등의 내부 패키지 & fiver, rendering 등의 용어 정의
React Scheduler 코드 파해치기
React 레거시 공식 문서 - 합성 이벤트
React 레거시 공식 문서 - 재조정
https://goidle.github.io/react/in-depth-react-hooks_1/

구성 요소

react (react core)

리액트 컴포넌트 정의와 관련된 패키지
createElement()와 같은 함수가 정의되어 있다.
다른 패키지를 의존하지 않아 다양한 플랫폼(브라우저, 모바일)에서 사용이 가능하다.

renderer

호스트와 연결하여 리액트 컴포넌트를 화면에 그리는 것과 관련된 패키지
호스트 렌더링 환경에 의존하기 때문에react-dom(웹), react-native-renderer(모바일) 등 호스트에 따라 다른 패키지 사용
reconciler, legacy-events 패키지에 의존하고 있다.

legacy-events

SyntheticEvent라는 이름으로 내부적으로 개발된 이벤트 시스템
- 각 브라우저의 서로 다른 이벤트를 SyntheticEvent로 랩핑하여 같은 속성을 가지도록 표준화
- 모든 브라우저에서 이벤트가 동일하게 동작할 수 있도록 처리
- React가 지원하는 추가적인 기능을 수행할 수 있도록 하는 역할도 있다.

scheduler

비동기로 되는 React의 여러 Task를 스케줄링하고, pause 및 resume 작업을 할 수 있도록 도와주는 라이브러리
- React는 비동기로 Task를 처리한다. (setState직후 state를 출력하면 변경된 state 값이 아니라 기존 값이 출력되는 것을 통해 비동기 처리임을 알 수 있다)
우선순위에 따른 Task 실행 순서를 알고, 이에 대한 비동기 실행의 책임을 지는 패키지

reconciler

가상 DOM을 재조정하는 역할
이전 버전에서는 stack 아키텍처를 사용했지만, React 16 이후 fiber 아키텍처를 사용
component를 호출하는 역할도 함

용어

렌더링

렌더링의 전체 과정은 다음과 같다.

컴포넌트 호출
컴포넌트 실행 결과 react element 반환
반환된 react element를 바탕으로 가상 DOM 재조정 (여기까지가 렌더링)
renderer가 컴포넌트 정보를 DOM에 삽입 (mount)
브라우저가 DOM을 paint

즉 컴포넌트를 호출하여 받은 react element를 가상 DOM에 적용하는 과정까지가 렌더링이다.

react element

JSX, createElement 등으로 생성 된 DOM에 삽입 될 내용을 담은 트리 구조의 일반 Javascript 객체 (다른 react element를 children으로 갖기 때문에 트리구조)
- JSX로 작성한 것은 결국 babel을 통해 react.createElement()로 변환되어 호출한다.
type, key, props, ref 등 DOM 트리에 그리기 위해 필요한 정보들을 속성으로 갖는다.
- type은 string 또는 ReactClass가 할당 됨
  - react element가 DOM elements일 경우 HTML 태그 이름(button, span 등)이 type이 됨
  - react component elements일 경우 클래스 컴포넌트(Button 등)이 type이 됨
- props는 object가 할당 됨
  - DOM elements일 경우 className, children, value 등 태그의 속성과 자식 요소들이 할당
  - react component elements일 경우 DOM 트리에 삽입되어 렌더링 되기 위해 필요한 정보들이 할당
- 결국 DOM 트리에 전달할 정보를 담고 있다.

예시

// JSX
const DeleteAccount = () => {
  <div>
    <p>Are you sure?</p>
  	<DangerButton color="red">Yes</Dangerbutton>
  </div>
}

// React Element
const DeleteAccount = () => ({
  type: "div",
  props: {
    children: [{
    type: "p",
    props: {
      children: "Are you sure?"
    },
    }, {
      type: DangerButton,
      props: {
        color: "red",
        children: "Yep"
      }
    }]
  }
})

각각의 컴포넌트가 모두 개별 Javascript 객체이기 때문에 컴포넌트 간의 decoupled가 가능하다.
리액트 엘리먼트의 자식으로, 또다른 리액트 컴포넌트(DangerButton)가 올 수 있는데, 이 역시 다른 리액트 엘리먼트를 반환한다.
- 모든 리액트 엘리먼트가 DOM 엘리먼트가 될 때까지 모든 엘리먼트 트리를 순환한다.
- 이렇게 모든 요소가 DOM 엘리먼트로 치환될 수 있게 되어 DOM에 적용하는 것이 가능하다.
React가 이 리액트 엘리먼트의 정보를 바탕으로 적절한 때에 create, update, destroy 동작을 수행한다.

function createElement(type, config, children) {
    var propName; // Reserved names are extracted

    var props = {};
    var key = null;
    var ref = null;
    var self = null;
    var source = null;

    ...

    return ReactElement(type, key, ref, self, source, ReactCurrentOwner.current, props);