React memo를 반드시 사용해야 하는 이유

React memo는 부모요소가 다시 렌더링될때 요소의 입력 prop이 같은 경우, 함수가 다시 실행되는 것을 방지한다. 얼핏 보면 컴포넌트의 입력 prop이 같은데 출력이 다른 경우가 있을 것 같지만, 그런 경우가 있다면 그건 잘못된 설계다.

 

React hook에서 렌더 부분은 state와 prop에 대해 순수해야만 한다.

그런데 state도 그대로, prop도 그대로인 상태에서 재렌더링을 했다고 해서 리턴값이 바뀌면,

그것은 hook이 순수함수여야 한다는 원칙을 어긴 것이다.

 

 

사용하지 않아야 할 수도 있는 단 한 가지 예외상황은, props에 대해 객체를 넘겨줄 때 뿐이다. (부모 요소에서 객체를 넘겨줄 경우, 객체가 변화할 시에 객체의 키-값만 바뀌고 객체 자체는 바뀌지 않는 경우가 있기 때문이다. memo는 deep compare를 수행하지 않으므로 객체 자체가 같으면 다시 렌더링을 수행하지 않는다.)

 

When should you NOT use React memo?