리액트가 컴포넌트를 스크린에 표시하는 과정
1. Triggering a render
컴포넌트가 렌더되는 이유는 2가지가 있습니다.
- 컴포넌트의 초기 렌더링
- 컴포넌트나 조상 컴포넌트의 상태가 업데이트됨
app을 시작하면, 초기 렌더링이 진행돼야 합니다. 이 초기 렌더링은 DOM 노드를 타겟으로 하여 createRoot를 호출하고, render 메서드로 컴포넌트를 호출하면 됩니다.
const root = createRoot(document.getElementById('root'))
root.render(<Image />);→ index.js에서 자주 본 코드가 초기 렌더링을 실행하는 역할을 합니다.
초기 렌더링이 진행된 이후에는 setter 함수로 컴포넌트의 상태를 업데이트함으로써 렌더링을 트리거할 수 있습니다. 상태가 변경되면 자동으로 렌더링을 예약하게(automatically queues a render) 됩니다.
2. Rendering the component
렌더가 트리거되면, 리액트는 컴포넌트를 호출하여 무엇을 화면에 그릴지 파악합니다. 이때 리액트가 컴포넌트를 호출하는 것을 렌더링이라고 합니다.
렌더링이란 리액트가 컴포넌트를 호출하는 것이다.
(”Rendering” is React calling your components.)
리액트는 초기 렌더링일 경우 root 컴포넌트를 호출하고, 이어지는 후속 렌더링일 경우 상태가 변경되어 렌더링을 트리거한 컴포넌트를 호출합니다.
이 프로세스는 재귀적입니다. 업데이트된 컴포넌트가 다른 컴포넌트를 반환한다면 리액트는 반환한 컴포넌트를 다음에 호출(렌더링)하고, 반환한 컴포넌트가 또 다른 컴포넌트를 반환하면, 반환된 컴포넌트를 다음에 호출(렌더링)합니다. 이 과정은 더 이상 반환되는(중첩되는) 컴포넌트가 없고, 리액트가 화면에 무엇을 표시해야 할지 명확히 알게 될 때까지 반복됩니다. → 재귀적!
리액트가 컴포넌트를 호출했을 때, 즉 다시 렌더링하는 동안에는, 이전 렌더링 이후에 어떤 프로퍼티들이 변경되었는지 계산하는 작업을 합니다. 그리고 커밋 단계를 기다립니다.
3. Committing to the DOM
컴포넌트 렌더링이 끝나면 렌더링 간 차이가 있을 경우에만 DOM을 변경합니다.
초기 렌더링일 경우, 만든 모든 DOM 노드들을 DOM API인 appendChild()를 사용해서 화면에 표시합니다. 리렌더링의 경우, 렌더링하는 동안 계산해 둔 최소한의 필요한 작업들을 적용합니다.
Reference
