React) 리액트 렌더링 과정

 

✅렌더링 과정

지긋지긋한 아래의 counter 코드

그런데, 도대체 어떻게 이코드가 렌더링 되는지는 알지 못했다.

아래 코드와 함께 차근차근 렌더링 과정에 대해 알아보자.

import { useState } from 'react';

function Example() {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count+1)}>
        click me
      </button>
    </div>
  );
}

 

🔸요약 🔸
1) 상태 변경 전 초기 렌더링
2)  상태 변경 및 새로운 Virtual DOM 생성
3) Diffing
4) Reconcilation
5) commit

---

1. 상태 변경 전 초기 렌더링

 리액트 컴포넌트가 처음으로 렌더링될 때, Example 컴포넌트는 JSX를 반환한다. 이 JSX는 JS가 컴파일 되고 배포 준비가 되는 순간에  React.createElement() 함수를 통해 React Element 를 리턴한다. 

React Element 는 JS 객체로 이루어져 있으며, 컴포넌트가 렌더링 해야할 내용에 대한 정보를 포함하고 있다. 이 객체는 보통 type, props, children 프로퍼티를 가지고 있다. 

// 일반적인 jsx문법
return <SomeComponent a={42} b="testing">Text here</SomeComponent>

// 이것을 호출해서 변환된다.
return React.createElement(SomeComponent, {a: 42, b: "testing"}, "Text Here")

// 호출결과 element를 나타내는 객체로 변환된다.
{type: SomeComponent, props: {a: 42, b: "testing"}, children: ["Text Here"]}

React Element 가 생성 되고 이들이 부모-자식 관계의 트리 구조를 형성하면서 React Element Tree(Virtual DOM) 가 만들어진다. 

// Virtual DOM 형태
{
    type: 'div',
    props: {
        children: [
            {
                type: button,
                props: {
                    children: "버튼입니다",
                    onClick: ()=>{}
                }
            },
            {
                type: input,
                props: {children: "인풋입니다."}
            },
            {
                type: CountButton,
                props: {children: "리액트컴포넌트입니다"}
            }
        ]
    }
}

 

2. 상태 변경 및 새로운 Virtual DOM 생성

- click me 버튼을 클릭하면 'setCount' 가 호출된다.(이 부분에서 리액트와 클로저 관계가 나옴)

- setState() 메소드가 호출되면 render()메소드의 호출을 통해 새로운 React Element Tree가 반환된다. 

- 상태가 변경될 때마다, React 는 새로운 Virtual DOM 을 생성한다. 이 새 Virtual DOM 은 변경된 count 상태를 반영하며, 이전의 Virtual DOM 과는 다르다. 

 

3. Diffing 

- 이전 Virtual DOM 과 새로운 Virtual DOM 사이의 차이점을 비교하기 위해 'diffing' 과정이 진행된다. 

- React 는 두 Virtual DOM tree를 비교하여 실제로 변경된 부분을 파악한다. 

 

4. Reconciliation(재조정)

- diffing 과정 후, React는 변경된 부분만을 실제 DOM 에 일괄 갱신하는 Reconciliation 과정을 진행한다.

- 이는 성능 최적화를 위한 핵심적인 과정으로, 전체 DOM 트리를 다시 렌더링하는 대신 변경된 부분만 업데이트 하여 비용을 절약한다.

5. commit

- 최종적으로 변경 사항을 실제 DOM에 반영하는 단계인 'Commit'이 이루어집니다. 이때 브라우저는 변경된 DOM 요소를 화면에 다시 그린다. 

 

---

✅리렌더링

아래 두 글 읽고 리렌더링에 대해 다시 정리할 예정

https://medium.com/@yujso66/%EB%B2%88%EC%97%AD-%EC%99%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8%EC%97%90%EC%84%9C-%EB%A6%AC%EB%A0%8C%EB%8D%94%EB%A7%81%EC%9D%B4-%EB%B0%9C%EC%83%9D%ED%95%98%EB%8A%94%EA%B0%80-74dd239b0063

[번역] 왜 리액트에서 리렌더링이 발생하는가

 

 

https://yceffort.kr/2022/04/deep-dive-in-react-rendering#%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%ED%83%80%EC%9E%85%EA%B3%BC-%EC%9E%AC%EC%A1%B0%EC%A0%95-reconciliation

리액트의 렌더링은 어떻게 일어나는가?

---

참고자료

https://it-eldorado.tistory.com/83

[React] 렌더링 과정 (+ 재조정, 생명 주기)

https://yceffort.kr/2022/04/deep-dive-in-react-rendering#%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%ED%83%80%EC%9E%85%EA%B3%BC-%EC%9E%AC%EC%A1%B0%EC%A0%95-reconciliation

리액트의 렌더링은 어떻게 일어나는가?