React에서는 UI를 요청하고 제공하는 3가지 단계가 있습니다.
- 렌더링 트리거 (손님의 주문을 주방으로 전달)
- 컴포넌트 렌더링 (주방에서 주문 준비하기)
- DOM에 커밋 (테이블에 주문한 요리 내놓기)
1단계: 렌더링 트리거
컴포넌트에서 렌더링이 일어나는데에는 두 가지 이유가 있는데,
1. 컴포넌트의 초기 렌더링인 경우
2. 컴포넌트의 state가 업데이트 된 경우
가 있습니다.
초기 렌더링
앱을 실행할 때 초기 렌더링을 트리거해야 합니다. 프레임워크와 샌드박스는 때때로 이 코드를 숨기곤 하지만,
대상 DOM 노드와 함께 createRoot 를 호출한 다음 해당 컴포넌트로 render 메서드를 호출하면
이 작업이 완료됩니다.
// 프레임워크나 샌드박스는 때로 아래 코드를 숨기기도 한다.
import Image from './Image.js';
import { createRoot } from 'react-dom/client';
const root = createRoot(document.getElementById('root'))
root.render(<Image />);State 업데이트 시 리렌더링
컴포넌트가 처음으로 렌더링 된 후에는 set 함수를 통해 상태를 업데이트하여 추가적인 렌더링을 트리거할 수 있습니다.
컴포넌트의 상태를 업데이트하면 자동으로 렌더링 대기열에 추가됩니다.
2단계: React 컴포넌트 렌더링
렌더링을 트리거한 후 React는 컴포넌트를 호출하여 화면에 표시할 내용을 파악합니다.
"렌더링"은 React에서 컴포넌트를 호출하는 것 입니다.
-
초기 렌더링에서 React는 루트 컴포넌트를 호출합니다.
-
이후 렌더링에서 React는 state 업데이트가 일어나 렌더링을 트리거한 컴포넌트를 호출합니다.
-
재귀적 단계 : 업데이트된 컴포넌트가 다른 컴포넌트를 반환하면 React는 다음으로 해당 컴포넌트를 렌더링하고 해당 컴포넌트도 컴포넌트를 반환하면 반환된 컴포넌트를 다음에 렌더링하는 방식입니다. 중첩된 컴포넌트가 더 이상 없고 React가 화면에 표시되어야 하는 내용을 정확히 알 때까지 이 단계는 계속됩니다.
주의사항
- 동일한 입력에는 동일한 출력을 해야합니다.
동일한 입력이 주어지면 컴포넌트는 항상 동일한 JSX를 반환해야 합니다. - 이전의 state를 변경해서는 안됩니다.
렌더링 전에 존재했던 객체나 변수를 변경해서는 안 됩니다.
3단계: React가 DOM에 변경사항을 커밋
컴포넌트를 렌더링(호출)한 후 React는 DOM을 수정합니다.
-
초기 렌더링의 경우 React는
appendChild()DOM API를 사용하여 생성한 모든 DOM 노드를 화면에 표시합니다. -
리렌더링의 경우 React는 필요한 최소한의 작업(렌더링하는 동안 계산된 것)을 적용하여
DOM이 최신 렌더링 출력과 일치하도록 합니다.
React는 렌더링 간에 차이가 있는 경우에만 DOM 노드를 변경합니다.
예를 들어 매 초 부모로부터 전달된 다른 props로 다시 렌더링하는 컴포넌트가 있다면,
<input> 에 텍스트를 입력하여 value 를 업데이트 하지만
컴포넌트가 리렌더링될 때 텍스트가 사라지지 않습니다.
( React의 VDOM을 사용해 차이가 있는 경우에만 DOM 노드를 변경한다. )
꼭 짚고 넘어가야할 점
-
React가 페인팅을 하는 과정에는 3가지 과정이 있다.
- 렌더링 트리거
- 컴포넌트 렌더링
- DOM에 변경사항을 커밋
-
렌더링이 일어나는데에는 2가지 경우가 있다.
- 컴포넌트의 초기 렌더링의 경우 (초기 렌더링)
- 컴포넌트의 state가 변경되었을 경우 (리렌더링)
-
렌더링을 트리거한 후, 업데이트된 컴포넌트가 다른 컴포넌트를 반환하면 React는 다음으로 해당 컴포넌트를 렌더링하고, 해당 컴포넌트도 컴포넌트를 반환하면 반환된 컴포넌트를 다음에 렌더링한다.
중첩된 컴포넌트가 더 이상 없고 React가 화면에 표시되어야 하는 내용을 정확히 알 때까지 이 단계는 계속된다. -
렌더링 간에 차이가 있는 경우에만 DOM 노드를 변경한다.
