React memo, useCallback 올바로 사용하기

리액트에서 리렌더링은 빈번히 일어난다.

리렌더링은 컴포넌트를 구성하는 함수를 다시 실행하는 것이라고 생각하면 좋다.

리렌더링의 목적은 state 변화로 무엇이 달라졌는지를 파악하기 위해서이고

부모의 state가 변했으면 당연 말단 자식까지 전부 리렌더링이 된다.

때문에 자식이 많고 복잡한 부모 컴포넌트일수록 리렌더링시에 많은 연산을 하게 된다.

(여기에서의 리렌더링은 실제 DOM과는 관련이 없고 Virtual DOM을 생성하기 위한 리렌더링이다.)

 

이러한 경우를 위해 React.memo를 쓸 수 있다.

자식 컴포넌트에 memo를 쓰면 props의 값들을 메모리에 저장하고

리렌더링시에 비교하여 값이 달라졌을 때에만 자식 컴포넌트를 렌더링시키고 그렇지 않으면 건너뛴다.

메모리에 저장하는 것과 비교하는 로직이 연산이 덜 들지, 리렌더링이 연산이 덜 들지는 애매할 때가 많고

분명하게 리렌더링보다 리소스가 적다고 판단될 때 memo를 사용하자.

리렌더링시 많은 자바스크립트 코드가 실행될 거대한 컴포넌트에 쓰자.

 

한편 리렌더링될 때마다 JSX 위쪽에 위치한 함수들도 다시 생성된다.

동일한 기능의 함수라고 해도 자바스크립트는 다른 것으로 판단하기 때문에 (func !== func)

props에 함수를 넣을 경우 memo를 쓴다해도 리렌더링을 막지 못한다.

 

이런 때 사용할 수 있는 게 useCallback이다.

useCallback을 쓰면 이제 더 이상 리렌더링 때마다 함수를 새로 생성하는 게 아닌

메모리(클로저)에 저장하고 저장된 함수를 불러오기 때문에

props에 넣은 저장된 함수는 동일성을 보장받고 memo가 제대로 작동된다.