[5주차] React 숙련 강의 내용 정리 (2) - Hooks 최적화 : memoization

당분간은 숙련 강의를 통해 새로운 개념을 배우느라 정신 없는 시간이 될 것 같다😵‍💫

---

React Hooks 최적화

불필요한 렌더링과 그로 인한 비용이 발생하지 않도록 최적화하는 것이 좋다.

1. React.memo

컴포넌트를 캐싱하는 최적화 방법. 컴포넌트를 메모리에 저장(캐싱)해 두고 필요할 때 사용하도록 한다. 이렇게 하면 부모 컴포넌트에 변화가 있을 때 자식 컴포넌트까지 모두 리렌더링되는 것을 막아줄 수 있다.

자녀 컴포넌트를 export할 때 다음과 같이 작성한다.

export default React.memo(컴포넌트명);

2. useCallback

인자로 들어오는 함수를 기억(메모이제이션)한다.

함수 역시 객체이기 때문에 리렌더링될 때 함수의 내용 자체에는 변화가 없더라도 다른 주솟값을 가진 객체가 된다. 따라서 자식 컴포넌트에서 해당 함수를 인자로 받을 때 props가 바뀌었다고 인식되기 때문에 불필요한 리렌더링이 일어나게 된다.

1. 부모 컴포넌트에서 useCallBack을 import한다.
2. 기억하고자 하는 함수를 useCallback으로 감싼다.

const initCount = useCallback(() => {
   setCount(0);
}, []),

3. 특정 state가 변경될 때 함수에 갱신되는 내용이 있어야 할 경우를 위해 의존성 배열도 추가해 둔다.
   예를 들면 count값 변경은 함수에 갱신이 되어야 변경된 count값을 다른 곳에서도 활용할 수 있으므로, 이런 경우 의존성 배열을 [count]로 작성한다.

useMemo

함수가 리턴하는 값 혹은 value 자체를 기억해 두고 활용한다. 함수가 값을 리턴하는 과정을 여러 번 반복하며 리렌더링하는 것을 방지할 수 있다.

아래처럼 작성하여 함수를 실행했을 때 반환되는 값을 value123 변수에 저장해둘 수 있다.

const value123 = useMemo(() => {
   return 함수()
}, [dependencyArray]);

또한 다른 컴포넌트에 의해 리렌더링 될 때 객체형 데이터의 불변성을 지켜주기 위해 useMemo를 사용할 수 있다.

그러나 useMemo를 남발하면 메모리 확보를 너무 많이 하게 되어 오히려 성능이 악화될 수 있으니 주의해야 한다!