[ React 공식문서 ] 상호작용 추가하기 (3) : 렌더링하고 커밋하기

• UI 를 요청하고 제공할 때 세 가지의 단계를 거친다

1. Trigger : 렌더링 촉발
2. Render : 컴포넌트 렌더링
3. Commit : DOM 에 커밋

1. Trigger : 렌더링 촉발

• 컴포넌트에서 렌더링이 일어나는 데는 두 가지 이유가 있다.

1. 첫 렌더링
2. 컴포넌트의 state 혹은 상위 요소 중 하나가 가 업데이트 된 경우

---

2. Render: 컴포넌트 렌더링

• 렌더링을 촉발시키면 React 는 컴포넌트를 호출해 화면에 표시할 내용을 파악한다
• 렌더링이란 React 에서 컴포넌트를 호출하는 것이다

1. 첫 렌더링에서 React 는 루트 컴포넌트를 호출한다
2. 이후의 렌더링에서 React 는 state 의 업데이느에 의해 렌더링이 발동된 함수 컴포넌트를 호출한다

• 이 과정은 재귀적으로 이뤄진다
• 업데이트된 컴포넌트를 반환하면 React 는 다음으로 해당 컴포넌트를 렌더링하고 해당 컴포넌트도 컴포넌트를 반환했다면 반환된 컴포넌트를 다음에 렌더링하는 방식
• 중첩된 컴포넌트가 더 없고, React 가 화면에 표시돼야 하는 내용을 정확히 알 때까지 이 단계는 계속된다.

export default function Gallery() {
  return (

Inspiring Sculptures

  );
}

function Image() {
  return (
    
  );
}

• 위 코드에서 첫 렌더링을 하는 동안에 React 는 <section>, <h1>, 3개의 <img> 태그에 대한 DOM 노드를 생성한다
• 리렌더링할 때는 렌더링 이후 변경된 속성을 계산한다
  • 이 단계에서 따로 DOM 노드를 생성하지 않는다

3. Commit : React 가 DOM 에 변경사항 커밋

• 컴포넌트를 렌더링한 후 React 는 DOM 수정한다
  • 초기 렌더링의 경우, React는 appendChild() DOM API 를 사용해 모든 DOM 노드를 화면에 표시한다
  • 리렌더링의 경우, React 는 필요한 최소한의 작업을 적용해 DOM 이 최신 렌더링 출력과 일치하도록 한다
• React 는 렌더링 간에 차이가 있는 경우에만 DOM 노드를 변경한다

export default function Clock({ time }) {
  return (
    <>
      <h1>{time}</h1>
      <input />
    </>
  );
}

• 예를 들어 Clock 이라는 컴포넌트가 props 로 매초에 현재 시간을 업데이트해서 받는다고 할 경우
• React 는 input 창에 어떤 값이 쓰여 있든, time 이 업데이트 됐다고 해서 input 을 새롭게 갱신하지 않는다

---

Reference

 

https://react.dev/learn/render-and-commit

Render and Commit – React

https://react-ko.dev/learn/render-and-commit

렌더링하고 커밋하기 – React