[React] React 리렌더링의 모든 것

• 렌더링이란?
  • 일반적인 렌더링 의미: 초기 입력을 받아 최종적으로 사용할 수 있는 결과물을 생성하는 과정
  • 리액트에서 렌더링 의미: 이전 스냅샷과 최신 스냅샷의 차이를 찾아(리렌더링) + 차이가 존재하면 DOM을 업데이트(리페인팅)하는 프로세스

• 리렌더링은 리페인팅이 아닙니다.
  • 리렌더링은 무엇을 변경해야 하는지 파악하는 React의 프로세스 중 하나입니다.
  • 리페인팅은 DOM이 변경될 때마다 브라우저가 관련 픽셀을 다시 그리는 프로세스입니다.
    • 즉, 리렌더링이 일어나도 스냅샷간의 차이가 없다면 DOM을 업데이트하지 않습니다.
    • 리렌더링 !== 리페인팅
• 리액트는 아래의 과정으로 리렌더링을 수행합니다
  1. React는 렌더링이 될 때 스냅샷을 찍습니다.
  2. 그후 상태 변경등으로 인해 이전 스냅샷과 최신 스냅샷의 차이가 발생하면, 해당 차이를 찾아냅니다.(reconciliation)
  3. 만약 변경사항이 존재하면 일종의 커밋을 하게됩니다. (이전 스냅샷과 최신 스냅샷 일치시킴)
  4. 이를 DOM에 반영합니다. (리페인팅)
• 리액트에서 리렌더링은 언제 이루어질까?
  • 모든 리렌더링은 상태가 변경될 때 시작되며, 컴포넌트가 리렌더링되는 트리거입니다.
  • 상태가 변경될때, 해당 상태를 공유하고 있는 모든 컴포넌트들이 리렌더링됩니다.
• Props 변경에 의한 리렌더링
  • 또한, 컴포넌트는 props가 변경될 때 리렌더링됩니다.
  • 즉, 하나의 컴포넌트가 리렌더링될 때, 해당 컴포넌트의 모든 자식 컴포넌트들이 리렌더링됨을 의미합니다.