React 공식 홈페이지 따라하기 - 렌더링 그리고 커밋

 

컴포넌트를 화면에 표시하기 이전에 React에서 렌더링 해야한다.

"렌더링"이란 React에서 컴포넌트를 호출하는 것이다.

 

React에서 UI를 요청하고 제공하는 세 가지 단계는 다음과 같다.

 

1. 렌더링 트리거

2. 컴포넌트 렌더링

3. DOM에 커밋

 

Trigger -> Render -> COmmit

 

 

1. 렌더링 트리거

컴포넌트 렌더링이 일어나는 두 가지 이유

• 컴포넌트의 초기 렌더링인 경우

초기 렌더링 방법

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

• 컴포넌트의 state가 업데이트된 경우
  • 컴포넌트가 처음으로 렌더링 된 후에는 set 함수를 사용하여 상태를 업데이트하여 추가적인 렌더링을 트리거할 수 있다(컴포넌트의 상태를 업데이트하면 자동으로 렌더링 대기열에 추가)

 

2. React 컴포넌트 렌더링

렌더링을 트리거한 후 React는 컴포넌트를 호출하여 화면에 표시할 내용을 파악한다.

• 초기 렌더링에서 React는 루트 컴포넌트를 호출한다(root)
• 이후 렌더링에서 React는 state 업데이트가 일어나 렌더링을 트리거한 컴포넌트를 호출한다.

재귀적 단계: 업데이트된 컴포넌트가 다른 컴포넌트를 반환하면 React는 다음으로 해당 컴포넌트를 렌더링하고 해당 컴포넌트도 컴포넌트를 반환하면 반환된 컴포넌트를 다음에 렌더링하는 방버이다.

이 것은 중첩된 컴포넌트가 더 이상 없고 React가 화면에 표시되어야 하는 내용을 정확히 알 떄까지 반복된다.

예시 코드는 아래와 같다.

 

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

 

초기 렌더링 하는 동안 React는 <section>, <h1> 그리고 3개의 <img> 태그에 대한 DOM 노드를 생성한다.

 

렌더링은 다음의 두 가지 특징을 갖는다.

1. 동일한 입력에는 동일한 출력을 해야한다(동일한 입력이 주어지면 컴포넌트는 항상 동일한 JSX를 반환)

2. 이전의 state를 변경해서는 안된다(렌더링 전에 존재했던 객체나 변수를 변경해선 안된다)

 

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

컴포넌트를 렌더링(호출)한 후 React는 DOM을 수정한다

• 초기 렌더링의 경우 : React는 AppendChild() DOM API를 사용하여 생성한 모든 DOM 노드를 화면에 표시한다.
• 리렌더링의 경우 : React는 필요한 최소한의 작업(렌더링하는 동안 계산된 것)을 적용하여 DOM이 최신 렌더링 출력과 일치하도록 한다.

React는 렌더링 간에 차이가 있는 경우에만 DOM노드를 반환한다.

예를들어 아래의 경우 매초 부모로부터 전달받은 props를 다시 렌더링하는 컴포넌트가 있다.

 

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

 

<input>에 텍스트를 입력하여 value를 업데이트 하지만 컴포넌트가 리렌더링될 때 텍스트가 사라지지 않는다.

그 이유는 위에서 설명한 리렌더링의 절차를 수행하기 때문이다.

조금 더 설명하자면, React가 시간을 나타내는 <h1>의 내용만 새로운 time 으로 업데이트하기 때문에

<input>이 JSX에서 이전과 같은 위치로 확인되므로 React는 <input> 또는 value를 건드리지 않는다.

 

이렇게 렌더링이 완료되면 React가 DOM을 업데이트 한 후 브라우저는 화면을 다시 그린다.

 

요약

• React 앱의 모든 화면 업데이트는 다음의 세 단계로 이루어진다.
  • 트리거
  • 렌더링
  • 커밋
• Strict Mode를 사용하여 컴포넌트에서 실수를 찾을 수 있다.
• 렌더링 결과가 이전과 같으면 React는 DOM을 건드리지 않는다