[React] 렌더링 최적화

리액트의 렌더링

• 리액트가 함수를 호출하는 것
• Render phase
  • 컴포넌트를 호출해서 리액트 element를 반환하고 새로운 virtual DOM 생성
  • 첫번째 렌더링이 아니라면 재조정 과정을 거친후, real DOM에 변경이 필요한 항목을 체크
• Commit Phase
  • render phade에서 체크해 둔 변경이 필요한 부분을 real DOM에 반영하는 과정
  • 재조정 과정이 필요없다면 실행되지 않음

리렌더링의 조건

• 컴포넌트의 state/props 값이 변경되었을 때
• 부모 컴포넌트가 리렌더링되면 전달되는 props의 참조값이 바뀌면서 자식 컴포넌트에서도 리렌더링이 이루어진다.
• 그렇다면 참조값이 바뀌지 않는다면 되지 않을까?
  • useCallback을 이용하여 참조값을 기억하도록 해본다
  • 그런데 리렌더링이 이루어진다
  • render phase 만 실행되고 commit phase는 실행되지 않음

참고 영상