[React 까보기 시리즈] React 구성요소인 reconciler, renderer 등의 내부 패키지 & fiber, rendering 등의 용어 정리

리액트 패키지의 구성 요소들 & 용어 정리 

https://www.youtube.com/watch?v=Cozfyv57JiY

 

구성요소 

• react 코어 
  • component를 정의함. 
  • 다른 패키지에 의존성이 없으므로 다양한 플랫폼(브라우저, 모바일)에 올려서 사용 가능 
• renderer 
  • react-dom, react-native-renderer 등 호스트 렌더링 환경에 의존 
  • 호스트와 react를 연결 즉, 웹에서는 DOM 조작 
  • reconciler와 legacy-events 패키지 의존성 
• event(legacy-events) 
  • 리액트 내부적으로 SyntheticEvent라는 이름으로 개발된 이벤트 시스템 
  •  기존 웹에서의 event를 wrapping하여 추가적인 기능을 수행할 수 있게 함 
• scheduler 
  •  react는 Task를 비동기로 실행함. 이 Task를 실행하는 타이밍을 알고 있는 패키지 
• reconciler 
  •  fiber architecture에서 VDOM 재조정 담당 
  •  컴포넌트를 호출하는 곳 

 

용어 

• 렌더링 
  • 컴포넌트 호출하여 return react element -> VDOM에 적용(재조정)하는 과정 
  •  전체 과정 
    •  컴포넌트 호출 return react element 
    • VDOM 재조정 작업 (여기까지가 렌더링) 
    • renderer가 컴포넌트 정보를 DOM에 삽입(mount) 
    • 브라우저가 DOM을 paint 
• react element 
  • 컴포넌트 호출 시 return 하는 것 (JSX -> babel을 통해 react.createElement() 호출) 
  • 컴포넌트의 정보(결국 DOM에 삽입될 내용을 담은 객체)
  • type, key, props, ref 등의 정보 
• fiber 
  • VDOM의 노드 객체(architecture 이름과 동일) 
  • react element의 내용이 DOM에 반영되기 위해 먼저 VDOM에 추가도이야 하는데 이를 위해 확장한 객체 
  • 컴포넌트의 상태, life cycle, hook이 관리됨 

 

 

React component, element, instance 

기존 UI model (OOP) 의 한계점 

각 component는 DOM node 주소와, 자식 component의 instance 주소를 보관해야 하며, 시의 적절하게 각각을 create, update, destory 해야 함 

• 관리할 컴포넌트 늘어나면 component 코드의 복잡도 증가 
• 자식 component에게 부모 component가 직접 접근하므로 decouple하기 어려움 

Elements Describe the Trees 

React는 element를 활용하는 것이 기존 UI model과 차이점 

 

Elements 

• is plain object describing component instance, DOM node and its desired properties 
• is not instance, just tell React what you wnat to see on the screen 
• is immutable description object with two fields(type: string | ReactClass, props: object) 
  • React Dom elements의 경우 string이 할당됨.  React Component elements일 경우 ReactClass가 할당됨 

 

React DOM elements 

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

 

• type: string(tag name)
• props: tags' attributes 
• just objects, so lighter than DOM elements(not objects) 
• don't need to be parsed, easy to traverse 

 

 

React Component elements 

{
	type: Button, 
    props: {
    	color: 'blue',
        children: 'OK!', 
        }
 }

• type: Function Or Class(React Component) 
• props: React component props 
• An element describing a component is also an element, just like an element describing the DOM node. They can be nested and mied with each other. 

-> 그 결과 component끼리 decoupled가 됨(컴포넌트끼리 is-a, has-a 관계로 표현 가능해짐) 

 

Components Encapsulate Element Trees 

React가 type 값이 class or functional인 element(React component element)를 만나면 

1. type 값을 보고 해당 component 함수 에게 element를 return 받는다. 

2. return 받은 element의 type 값이 tag name인 element(DOM element)를 만날 때까지 1번으로 돌아감 

 

{
	type: Button, 
    props: {
    	color: 'blue', 
        children: 'OK!', 
      }
  }
  
  // React는 Button을 만나면 component에게 물어봐서 아래 DOM element를 return 받음 
  
  { 
  	type: 'button', 
    props: {
    	className: 'button button-blue',
        children: {
        	type: 'b', 
            props: {
            	children: 'OK!', 
                }
            }
         }
     }

 

React는 모든 React Component elments가 React DOM elements를 return할 때까지 위 과정 반복 

모든 elmements가 가진 DOM elements를 알게 됨 -> React가 해당 DOM elements 등ㄹ을 적절한 때에 create, update, destory 

따라서 기존에 From UI modeling을 아래와 같이 간단하게 구현할 수 있게 됨 

 

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

 

The returned element tree can contain both elements describing DOM nodes, and elements describing other components, This lets you compose independent parts of UI without relyng on their internal DOM structure. 

(React element를 활용하여 기존에 DOM structre을 모두 활용하지 않고 필요한 정보만 독립적으로 UI를 관리할 수 있게 됨) 

 

Compoent가 return한 element를 활용해서 DOM Trees를 encapsulate 

 

Top-Down Reconcilation 

ReactDOM.render({
	type: Form, 
    props: {
    	isSubmitted: false, 
        buttonText: 'OK!'
      }
    }, document.getElementById('root'));

 

위 함수 호출 시 React는 Form component에게 props를 전달하며 return element를 요청 

Form -> Button -> DOM node element(button) 순서대로 return element를 진행 

 

• ReactDom.render(), setState() 호출 시 React가 reconcilation을 call함
• reconcilation이 끝나면 React가 DOM tree를 알게 되고,  renderer는 필수적인 최소한의 변화를 DOM node 업데이트에 적용
• 위와 같은 점진적 변화 덕분에 쉽게 최적과 가능
• props가 immutable이면 change 계산이 빨라짐
• React가 class component의 instance를 만들어줌 (직접 생성 X)
• Parent component instance가 child component instance에 직접 접근하려면 ref를 활용하는 압ㅇ법이 있지만 위 맥락에서 렌더링 최적화를 방해하기에 필수적인 상황(form item에 focus를 찾아야 한다거나 등) 제외하고는 안하는 게 좋음
• Instances는 React가 관리하므로 class component 구현 시 OOP스럽게 짜면 되는 정도 (따로 instnace에 대해 신경 쓸 필요 없음)