[React] re-rendering 되는 조건과 예시

Re-rendering 되는 조건과 성능 최적화 방법

✅  개념 

- rendering이란?

사용자가 화면에 view를 보여 주는 것을 렌더링이라고 한다.

 

- re-rendering이란?

사용자 화면에 view를 다시 새롭게 보여준다는 의미이다.

 

-  컴포넌트가 re-rendering 되는 조건 

1. 자신의 상태가 변경될 때(state 변경)

2. 부모 컴포넌트가 리렌더링 될 때
3. 자신이 전달받은 props가 변경될 때(props)
4. forceUpdate 함수가 실행될 때

✅  '성능 최적화' 배워야 하는 이유

- 상위의 컴포넌트에서 변화가 일어난다면, 하위 컴포넌트에 렌더링을 명령하게 된다.

- `pureComponent`를 사용하지 않고 큰 앱을 개발하게 된다면,
- 사소한 변경에도 모든 컴포넌트가 렌더링을 해야하기 때문에 성능에 저하를 일으킬 수 있다.

 

 

✅  성능 최적화를 위해 고민해야 하는 것들

1. 배열, 객체 리터럴의 경우

{ a: 10 } === { a: 10 } // false

 객체, 배열은 변경이 가능한(Mutable) 데이터이기 때문에 그렇습니다. 값이 다르면? 자신의 상태가 변경되었다고 생각하여, re-rendering 될 수 있다.

밑의 경우는 불변성을 해치게 된다.

return (
  <Home user={['RM','jin']} />
)

2. 함수의 경우

함수도 객체와 마찬가지로 불변데이터가 아니다.

더군다나 객체와 달리 동일한 함수임을 증명하려면 상당히 어려운 방법을 사용하게 됩니다.

3. ReactElement의 경우

- 컴포넌트 안에 엘리먼트들도 결국엔 프롭스이기 때문에 컴포넌트 렌더링시 비교대상이 된다.

- 비교하기 위해서 동일한 컴포넌트를 사용하는지, 내부에 있는 모든 property가 동일한지 비교하게 한다.

// 여기서 Home컴포넌트의 children으로 strong과 p 태그가 있다.
// 부모인 home이 렌더링 되면 자식 요소들도 렌더링 된다. 

return (
  <Home 
    name={['RM','Jin']}
    setStateFile={setStateFile}>
     <strong>하나</strong>
     <p>둘</p>
  </Home>
)

 

 

 

출처: 

https://url.kr/lyvpwa

https://url.kr/g4ujlv

https://url.kr/jsga6x

제가 이해한 건 여기까지인데

혹시 잘못 정리되었다면 수정할 수 있게 알려주시면 감사하겠습니다.