[Adding Interactivity] Render and Commit

🚀 Step of rendering

---

Component가 화면에 나타나기 위해서는 React가 component를 render하는 과정을 거쳐야 한다. React의 render 과정을 정확히 아는 것이 React의 동작을 이해하는 데 큰 도움을 줄 수 있다.

React의 render 과정은 다음의 과정을 거친다.

🛸 Step 1: Trigger a render

---

Component는 두 가지 경우에 render를 시작한다.

1. component's initial render

2. component's (or one of its ancestors') state update

• Initial render

App이 최초 시작했을 때, initial render가 발생한다.

const root = createRoot(document.getElementById('root'))
root.render(<Image />);

Render가 발생할 DOM node에 createRoot를 호출하고 render 함수를 통해 initial render를 trigger한다.

• Re-renders when state updates

Initial rendering 이후 발생하는 render는 모두 set state update로 부터 trigger 된다. set function을 통해 state update가 발생하면 해당 render 요청이 queue에 삽입된다.

🚁 Step 2: React renders your components

---

Render trigger가 발생하면, React는 component를 호출한다.

• On initial render - React will call the root component

• For subsequent renders - React will call the function component whose state update triggered the render

💡 “Rendering” is React calling your components.

Rendering은 곧 JS function인 component를 단순히 호출하는 것임을 인지하자. 또한 당연하게도 component가 다시 child component를 반환하면 해당 child component가 recursive하게 호출된다.

다음은 Image component를 child component로 갖고 있는 Gallery component에 대한 예시이다.

export default function Gallery() {
  return (
    <section>
      <h1>Inspiring Sculptures</h1>
      <Image />
      <Image />
      <Image />
    </section>
  );
}

function Image() {
  return (
    <img src="https://i.imgur.com/ZF6s192.jpg" />
  );
}

• During the initial render - React는 <section>, <h1>, 그리고 세 개의 <img> 태그에 대한 DOM node를 생성한다.

• During a re-render - React는 이전 render에 대해 바뀐 값이 있는 속성에 대해서만 수정을 진행한다.

• Optimizing performance

앞서 말했듯이, rendering은 nested component에 대해 recursive하게 진행되며 이는 당연히 performance 관점에서 optimal하지 않다. 관련한 optimization에 대해서는 이후 포스팅에서 다룬다.

💡 Don't optimize prematurely!

🚂 Step 3: React commits changes to the DOM

---

Component들에 대한 호출이 완료되면 React는 DOM을 수정한다.

• For the initial render - React는 appendChild() DOM API를 통해 모든 DOM node를 생성한다.

• For re-renders - React는 최소한의 필요한 DOM 수정만을 수행한다. 이는 Step 2에서 수행된다.

💡 React only changes the DOM nodes if there's a difference between renders.

다음 Clock component는 매 초마다 새로운 time prop을 부모로부터 전달받는다.

export default function Clock({ time }) {
return (
<>

  <h1>{time}</h1>
  <input />
</>

);
}

time의 수정으로 인해 re-render가 발생함에도 <input>의 입력창에 작성한 내용은 사라지지 않는 것을 알 수 있다. 이는 React가 re-render 시에 수정 사항에 대한 변화만을 화면에 적용 시키기 때문이다.

🚄 Epilogue: Browser paint

---

Render 과정이 완료되고 React의 DOM에 대한 수정 역시 완료되면 browser는 다시 화면을 구성한다. 이 과정을 Browser rendering이라고 부르며, React Doc에서는 Browser Painting이라 칭한다.