React.memo

고차 컴포넌트

컴포넌트를 가져와 새 컴포넌트를 반환하는 함수

 

React.memo

React.memo는 고차 컴포넌트(Higher Order Component)

컴포넌트가 동일한 props로 동일한 결과를 렌더링해낸다면, React.memo를 호출하고 결과를 메모이징(Memoizing)

즉, React는 컴포넌트를 렌더링하지 않고 마지막으로 렌더링된 결과를 재사용

하지만, 자기 자신의 state 변경 시에는 리렌더링

 

 

 

React.memo 실습

CountView , TextView를 생성한 뒤, state가 변경될 때마다, 컴포넌트가 리렌더링 되는 빈도를 알아보았다. 

 

count를 증가하니, count를 사용하지도 않는 TextView에서도 렌더링이 발생하는 것을 볼 수 있었다.

 

 

TextView에 React.memo을 적용시켜서 text가 변경되지 않는다면, 리렌더링이 발생하지 않게 만들었다.

그 후 count를 올리면서 테스트를 해보니, TextView의 리렌더링이 발생하지 않는 것을 알 수 있었다.

 

 

이번에는 각각 숫자와 객체를 받은 뒤, 동일한 값으로 state를 변경 하였다.

그 후 컴포넌트의 리렌더링을 관찰하였다, A button을 눌렀을 때는 1 -> 1로 변화가 없으므로

CounterA,B 모두 변화가 없어서, React.memo에 의해서 리렌더링이 되지 않았다.

 

B button도 동일하게 변화가 없을거라는 예상을 벗어나고,

리렌더링이 되는 것을 볼 수 있었다. 

 

Counter B가 리렌더링 된 이유는 무엇일까?

그 이유는 obj가 객체이고 React.memo는 얕은 비교를 통해서 리렌더링을 결정하기 때문이다.

{count : 1}   ,  {count: 1} 이 두 개의  객체는 동일한 값으로 보이지만 다른 주소 값을 가지기 때문에 동일하다고 볼 수 없다.

따라서 React.memo는 얕은 비교를 통해서 obj가 변했다고 판단하고 리렌더링을 하는 것이다.

 

 

해결 방법

areEqual 함수를 만들어 이전 props와 이후 props의 count를 비교해주어 true/false를 리턴

React.memo에 첫번째 인자로 이전에 만든 CounterB 컴포넌트,

두번재 인자로 areEqual 함수를 넣어줌, 이 때 areEqual 함수는 compare와 유사하게 동작

 

obj.cnt 즉 값 끼리의 비교이므로, 변화가 없어서 새롭게 만들어진 컴포넌트는 B button을 눌러도

리렌더링이 되지 않음