ReactJS 숙련: Hooks (Memorization, CustomHook)

01. 시작하기에 앞서

리액트에서 렌더링 최적화는 매우 중요합니다. 컴포넌트가 불필요하게 리렌더링 되는 것은 성능 저하를 유발할 수 있기 때문에, 이를 최소화하기 위한 다양한 방법들이 도입되었습니다. 그 중에서도 memoization은 컴포넌트, 함수, 값 등을 메모리에 저장해 불필요한 재연산을 방지하는 기법입니다

(1) 리렌더링의 발생 조건

1. 컴포넌트의 상태(state)가 변경될 때
2. 전달받은 속성(props)이 변경될 때
3. 부모 컴포넌트가 리렌더링될 때 자식 컴포넌트도 함께 리렌더링됩니다.

(2) 최적화

리렌더링을 줄이기 위해 다양한 최적화 방법을 사용합니다. 대표적인 방법은 다음과 같습니다:

• memo(React.memo): 컴포넌트 캐싱
• useCallback: 함수 캐싱
• useMemo: 계산된 값 캐싱

이러한 불필요한 리렌더링을 방지하기 위해 React.memo, useCallback, useMemo와 같은 최적화 방법을 사용할 수 있습니다.

 

02. React.memo

React.memo는 부모 컴포넌트가 리렌더링되더라도 자식 컴포넌트가 불필요하게 리렌더링되지 않도록 합니다. 이는 컴포넌트를 메모리에 저장해두고 props가 변경되지 않으면 이전에 렌더링된 결과를 재사용하게 합니다.

문제 상황 예시

예를 들어, 버튼을 클릭해 상태를 변경할 때, 모든 하위 컴포넌트가 함께 리렌더링되는 상황을 살펴볼 수 있습니다. 이때 React.memo를 사용하면 상태 변경으로 인한 불필요한 리렌더링을 방지할 수 있습니다.

export default React.memo(Box1);
export default React.memo(Box2);
export default React.memo(Box3);

이렇게 적용하면, 자식 컴포넌트는 부모 컴포넌트의 상태가 변경되어도 리렌더링되지 않습니다.

 

03. useCallback

useCallback은 함수 자체를 메모이제이션하는 훅입니다. 이 훅은 함수가 불필요하게 다시 생성되는 것을 방지합니다.

문제 상황 예시

함수를 props로 전달할 때, 부모 컴포넌트가 리렌더링되면 해당 함수도 새로 생성됩니다. 이를 방지하려면 useCallback을 사용하여 함수의 재생성을 막아야 합니다.

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

이렇게 하면 함수가 메모리에 저장되어, 의존성이 변경되지 않는 한 다시 생성되지 않습니다.

 

04. useMemo

useMemo는 복잡한 계산의 결과를 메모이제이션하여, 동일한 계산을 반복하지 않도록 합니다.

사용 예시

useMemo를 사용하면 무거운 작업의 결과를 캐싱하여, 불필요한 연산을 피할 수 있습니다.

const value = useMemo(() => heavyWork(), []);

이 방법을 사용하면, 특정 의존성이 변경될 때만 함수를 다시 실행하고, 그렇지 않으면 이전의 결과를 사용합니다.