React의 패키지 구조와 용어 정리

 

🌼 들어가기

모던 리액트 : Deep Dive 책을 정독하던 도중, useState의 lazy initialization에 대한 원리를 이해하고 싶었다.

 

콜백 함수로 넘기면 처음 초기화일때만 실행되는것일까...?

내부 구조가 어떻게 되어있길래, 값과 함수, 콜백함수의 양상이 다르게 발생되는 것일까...?

 

그냥 그렇구나..하기에는 너무 이해하고 싶었다.

이를 위해서 React 패키지의 구조를 살펴보며 useState를 불러오는 react 코어를 알아야 했다.

 

따라서 이번 글에서는 리액트의 패키지 구조를 살펴보고자 한다.

---

 

✨ React 패키지 구조

리액트 패키지는 총 5가지로 나눌 수 있다.

1️⃣ react 코어

컴포넌트 정의와 관련된 패키지이며, createElement( ) 와 다른 패키지의 모듈을 제공합니다.
그러나, 다른 패키지와 의존성이 없기에, 여러 플랫폼에서 element를 만들고, 그릴 수 있다.

 

2️⃣ renderer

react-dom, react-native-renderer등 호스트. 즉, 플랫폼에 의존적인 패키지이다.

reconciler와 event 패키지에 대한 의존성을 가지고 있다.

 

3️⃣ event ( legacy-events )

react 내부에서 사용할 수 있도록 만든 Synthetic Event 객체이다.
이것은 왜 만들었나..? 모든 플랫폼에서 동일한 이벤트를 처리하기 위해서이다...!!

 

4️⃣ scheduler

리액트는 task 단위로 작업이 이루어지며, 해당 우선순위에 따라 스케줄링 되어진다. 이러한 task의 실행 순서를 알고 있는 패키지가 바로 scheduler인 것이다. 즉, 리액트에서 여러가지 작업이 비동기로 이루어질때, 해당 책임이 바로 scheduler에 있는 것이다.

따라서 scheduler는 플랫폼에 의존적이라고 볼 수 있다.

 

5️⃣ reconciler

리액트 패키지 중 가장 핵심이다.

hook, scheduler, reconciler는 서로 연관되어있는 부분이 많고, v16부터는 fiber 아키텍쳐가 도입되었다.

---

📍 element 🆚 component 

✅ element

element는 DOM Tree 생성에 필요한 정보를 담은 객체이다.

 

컴포넌트 호출 시, return 하는 것이라고 생각하면 된다. 즉, element 자체로 바로 사용되는 것이 아니다.

그래서 component의 정보를 담고 있는 모델 객체라고 생각하면 된다.

 

사실 JSX는 babel을 통해 react.createElement( )로 변환되어 생성된다. 

element는 type과 props 두 가지 필드로 구성되어 있다.

const element = {
  // This tag allows us to uniquely identify this as a React Element
  $$typeof: REACT_ELEMENT_TYPE,

  // Built-in properties that belong on the element
  type: type, // function App()
  key: key, // 1
  props: props, // { content: 'deep dive react' }
  ref: ref, // undefined
}

 

• type 👉 DOM 노드 (string) or component instance 
• props 👉 해당 객체가 가지고 있는 속성들 ex) classname, children ...

JSX를 통해 태그의 attribute로 넘겨주는 값 중 key, ref를 제외한 나머지는 모두 props로 관리된다.

 

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

// ✅ React Component element
{
  type: Button,
  props: {
    color: 'blue',
    children: 'OK!'
  }
}

 

✅ component

component는 props를 받아 element를 return 하는 function 이다.
class에서는 render( )를 통해 element를 return.

 

따라서 component는 element tree를 캡슐화 한다. 이 말은, react는 component의 조합으로 이루어지기에 가장 밑에 깔려있는 DOM Tag element를 만날때까지 트리를 타고 내려가면서 해당 component가 무엇을 return하는지 찾게 된다. 

 

리액트 컴포넌트에서는 props가 input이고 그 output이 바로 element tree이다.

const DeleteAccount = () => ({
  type: 'div',
  props: {
    children: [{
      type: 'p',
      props: {
        children: 'Are you sure?'
      }
    }, {
      type: DangerButton,
      props: {
        children: 'Yep'
      }
    }, {
      type: Button,
      props: {
        color: 'blue',
        children: 'Cancel'
      }
   }]
});
// ✅ react component 
const DeleteAccount = () => (
	// ✅ element를 tree구조로 return 
  <div>
    <p>Are you sure?</p>
    <DangerButton>Yep</DangerButton>
    <Button color='blue'>Cancel</Button>
  </div>
);

 

이렇게 dom 트리에 전달할 정보를 element 객체로 리턴하게 된다.

❗️ 단, 이것을 언제 생성, 갱신, 삭제 할지에 대한 여부는 component가 하는 것이 아님을 주의해라.❗️ 

 

다음과 같이 여러 element가 섞일 수 있으며, DOM 구조에 의존적이지 않아 UI를 독립적으로 구현할 수 있다.

const Form = ({ isSubmitted, buttonText }) => {
  if (isSubmitted) {
    // Form submitted! Return a message element.
    return {
      type: Message,
      props: {
        text: 'Success!'
      }
    };
  }
  // Form is still visible! Return a button element.
  return {
    type: Button,
    props: {
      children: buttonText,
      color: 'blue'
    }
  };
};

 

✨ Top - Down Reconciliation

React component에서로부터 DOM element를 상위에서부터 하위로 찾아가는 방식이다.

해당 과정은 ReactDom.render() , setState( ) 호출 시, 발생하는 과정이다. 더불어 이 결과로 발생하는 DOM의 변화를 업데이트 하게 된다. 

---

📍 렌더링 

컴포넌트를 호출하여 return react element를 받으면 이것을 VDOM에 적용하는 과정이다.

 

앞서 말한 것처럼 컴포넌트를 호출하면 react element가 return 하게 된다. react는 이것을 VDOM에 재조정하게 되며 여기까지가 렌더링 작업의 정의이다.

 

이후에 발생되는 DOM에 컴포넌트 정보를 주입하는 mount, 브라우저가 DOM을 paint하는 과정은 포함되지 않는다는 것을 주의하라.❗️

---

📍 Fiber

VDOM의 노드 객체이다.

 

렌더링 과정에서 VDOM을 재조정한다고 했다. 여기서 VDOM을 위해 element가 확장된 객체가 바로 Fiber이다.

그렇다면 무엇이 확장되었을까..🤔...?

 

바로 컴포넌트의 상태, life cycle, hook이 관리되어지고 있는 곳이다.

해당 개념은 리액트의 패키지에서 가장 중요하게 사용되니 꼭 기억하길 바란다.

---

🌈 정리하기

리액트 패키지들 5가지의 개념과 주요 용어들을 명확하게 정리하며, setState의 동작 과정을 톺아보기 위한 준비를 마쳤다.

온전히 바로 이해하기 보다는 여러번 살펴보며 이해를 통해 익히는 것이 중요한 내용이다.

 

 

📚 참고자료

• 리액트 톺아보기
• React Components, Elements, and Instance