[React]재렌더링이 발생하는 조건

리액트에서 재렌더링을 적절하게 제어하기 위해서는 재렌더링이 언제 발생하는지 알아야 한다.

 

[재렌더링이 발생하는 세 가지 패턴]

 

1. State가 업데이트된 컴포넌트
2. Props가 변경된 컴포넌트
3. 재렌더링된 컴포넌트 아래의 모든 컴포넌트

 

1) 1번의 State는 컴포넌트 상태를 나타내는 변수이다. 업데이트될 때 재렌더링되지 않으면 화면 표시를 올바르게 저장할 수 없다. 지금까지 본 것처럼 카운트업 변수를 실행해서 State를 변경하면 화면에 변경한 값이 실시간으로 반영되는 것은 State가 업데이트됨에 따라 컴포넌트가 재렌더링되기 때문이다.

 

2) 2번의 경우, 리액트 컴포넌트는 Props를 인수로 받고 그에 대응해 렌더링 내용을 결정하므로 Props의 값이 변할 때는 재렌더링해서 출력 내용을 변경해야 한다. 따라서 Props 값이 변할 때는 반드시 재렌더링을 한다.

 

3) 주의할 것은 3번이다. 입문자가 간과하기 쉬운 포인트이다. '재렌더링된 컴포넌트 아래의 모든 컴포넌트'가 렌더링 된다는 것은 루트 컴포넌트인 App.js가 State를 변경한 경우 모든 컴포넌트가 재렌더링된다는 것을 의미한다.

 

 

[컴포넌트 계층 구조]

 

컴포넌트 계층 구조

 

App.js가 State 변경 시 재레너링되는 컴포넌트

 

Child1.jsx가 State 변경 시 재렌더링되는 컴포넌트

 

⚠️ 특히 Props가 변경되지 않았더라도 디폴트 상태에서는 부모가 재렌더링되면 함께 재렌더링된다. 표시가 달라지지 않는데 매번 불필요한 렌더링을 하는 것은 성능 저하를 일으키는 원인이 되므로 그런 상황이 발생하지 않도록 코드에서 재렌더링을 최적화 한다.

 

[렌더링 최적화]

 

• 컴포넌트 메모이제이션 : React.memo
• 함수 메모이제이션 : React.useCallback
• 변수 메모이제이션 : React.useMemo

 

 

📕 출처: 모던 자바스크립트로 배우는 리액트 입문