[240514 TIL] 리액트 리렌더링

오늘은 본격적인 리액트 주차에 접어들어 특강을 수강했습니다.
리액트를 다루는데 있어 무엇보다 중요한 리렌더링의 조건에 대해 확실하게 정리가 된 시간이었습니다.

이것은 공식처럼 알고 있어야 할 것 같습니다.

 

리렌더링의 조건

state가 변경되면 컴포넌트는 리렌더링됩니다.

부모 컴포넌트로부터 받는 props의 값이 변경되면 컴포넌트는 리렌더링됩니다.

부모 컴포넌트가 리렌더링되면 자식 컴포넌트는 리렌더링됩니다.

 

1. state가 변경되면 컴포넌트는 리렌더링됩니다.
   • state는 컴포넌트의 상태를 나타내며, 상태가 변경되면 해당 컴포넌트와 그 하위 컴포넌트들은 리렌더링됩니다.
   • React는 setState 함수가 호출될 때마다 컴포넌트가 새 상태를 반영하도록 리렌더링을 트리거합니다.
2. 부모 컴포넌트로부터 전달받는 props의 값이 변경되면 컴포넌트는 리렌더링됩니다.
   • 컴포넌트는 부모로부터 props를 통해 데이터를 전달받으며, 부모 컴포넌트가 새로운 props를 전달할 때마다 자식 컴포넌트는 리렌더링됩니다.
   • 이는 자식 컴포넌트가 부모 컴포넌트의 상태나 props에 의존하고 있기 때문에 발생합니다.
3. 부모 컴포넌트가 리렌더링되면 자식 컴포넌트는 리렌더링됩니다.
   • 부모 컴포넌트가 리렌더링되면 그 자식 컴포넌트들도 기본적으로 리렌더링됩니다. 이는 자식 컴포넌트가 새로운 props를 받을 가능성이 있기 때문입니다.
   • 이 과정을 최적화하기 위해 React.memo를 사용할 수 있습니다. React.memo는 고차 컴포넌트로서, 동일한 props가 전달되면 자식 컴포넌트의 리렌더링을 방지합니다.

추가적인 상황

• React.memo와 shouldComponentUpdate
  • React.memo는 함수형 컴포넌트의 성능 최적화를 위해 사용됩니다. (shouldComponentUpdate는 클래스형 컴포넌트에서 비슷한 역할을 한다고 합니다.)
  • React.memo는 props의 변경을 얕은 비교(shallow comparison)하여, 변경되지 않은 경우 리렌더링을 건너뜁니다.
• 컨텍스트(Context)
  • Context API를 사용하면 전역적으로 데이터를 공유할 수 있습니다.
  • 그러나 Context의 값이 변경되면 해당 Context를 구독하는 모든 컴포넌트가 리렌더링됩니다.
• 키(key) 속성
  • 리스트를 렌더링할 때 key 속성을 올바르게 설정하지 않으면, React는 DOM 요소를 올바르게 재사용하지 못하여 불필요한 리렌더링이 발생할 수 있습니다. 고유한 key 값을 제공하여 이 문제를 방지할 수 있습니다.
• 비동기 상태 업데이트
  • 비동기적인 상태 업데이트는 여러 번의 상태 변경을 하나의 리렌더링으로 병합할 수 있습니다. 예를 들어, useState와 같은 비동기 상태 업데이트 훅은 내부적으로 여러 상태 변경 요청을 병합하여 성능을 최적화합니다.