[React] 메모이제이션

개발/Front

[React] 메모이제이션

차뀨뀨 2024. 6. 9. 18:01

📑 개요

메모이제이션! 성능을 위해 썼다고 하는데 사실 난 딱히 쓴 기억이 없다

뭔가 자주 쓰면 안된단 말도 있던데... 흠...

이걸 쓸만큼? 써야하는? 그런 상황의 개발이 없었던 거 같기도 하고.

내가 몰라서 그렇게 생각하는 걸지도?

아무튼 안 써 본 거니까 공부하면 도움이 되겠지

근데 항간에 들리는 소문으로는.......... React 19 버전이 나오면서 메모이제이션을 안 써도 된다던데.....?! 😬

💽 메모이제이션(Memoization)이란?

이전에 계산한 값을 캐싱하여 메모리에 저장함으로써 동일한 계산 시 불필요하게 반복되는 계산 과정 대신 이전에 저장 값을 반환하는 기술로 성능 최적화에 사용된다.

동일한 입력으로 반복 호출되는 함수나 컴포넌트가 있을 때 유용하다. (ex. 재귀 함수)

메모이제이션은 함수를 다시 계산하지 않고 저장된 값을 반환하여 함수의 성능을 향상시킨다.

따라서, 동일 입력에 대한 동일 출력을 생성하는 순수 함수의 호출을 최적화하고 함수형 프로그래밍을 보완하는 기술이기도 하다.

- Memoization의 방법

React.memo()
useMemo()
useCallback()

이 때, React.memo()는 props의 값을 통해 변경을 확인하며,

useCallback()과 useMemo()는 의존성 배열 내부 값으로 변경사항을 확인한다.

1️⃣ React.memo

React 라이브러리에서 제공하는 고차 컴포넌트로, 컴포넌트의 출력이 동일한 props에 대해 메모이제이션한다.

props의 얕은 비교를 통해 이전과 현재의 props가 같은지 확인하고, props가 변경되지 않았으면 이전 렌더링 결과를 사용한다.

const MyComponent = React.memo(function MyComponent(props) {
  // 컴포넌트 코드
});

const MyComponent = React.memo(function MyComponent(props) {
  // 컴포넌트 코드
});

// 부모 컴포넌트
function ParentComponent() {
  const [count, setCount] = useState(0);
  
  return <MyComponent count={count} />;
}

- 사용시기

컴포넌트 재렌더링 방지
부모 컴포넌트 렌더링 시, 자식 컴포넌트가 동일한 props로 불필요하게 재렌더링 되지 않도록 방지할 경우
성능 최적화
자식 컴포넌트가 많거나 렌더링 비용이 큰 컴포넌트일 경우

2️⃣ useMemo()

함수의 리턴 값을 메모이제이션하는 React Hook이다.

의존성 배열의 값이 변경되지 않을 경우 이전에 메모이제이션 된 값을 사용한다.

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

const memoizedValue = useMemo(() => {
  // 비용이 큰 계산
  return computeExpensiveValue(a, b);
}, [a, b]);

- 사용시기

비용이 큰 계산
계산 비용이 큰 경우 메모이제이션을 통해 불필요한 재계산을 피하고자 하는 경우
의존성 배열
특정 값이 변경될 때만 계산을 재실행하길 원하는 경우

3️⃣ useCallback()

함수 자체를 메모이제이션 하며, 메모이제이션 된 콜백 함수를 리턴하는 React Hook이다.

JS의 함수는 객체이므로 리렌더링이 될 때마다 새로운 함수가 생성되며, 자식 컴포넌트의 불필요한 리렌더링을 막기 위해 useCallback()의 사용이 필요하다.

주로 자식 컴포넌트에 콜백 함수를 props로 전달할 때 유용하다.

const memoizedCallback = useCallback(() => {
  doSomething(a, b);
}, [a, b]);

const memoizedCallback = useCallback(() => {
  doSomething(a, b);
}, [a, b]);

// 자식 컴포넌트에 콜백 함수 전달
<ChildComponent onAction={memoizedCallback} />;

- 사용시기

메모이제이션된 콜백 함수 제공
자식 컴포넌트에 콜백 함수를 props로 전달할 때 매번 새로운 함수를 생성하지 않도록 하고 싶은 경우
의존성 배열
특정 값이 변경될 때만 콜백 함수를 재생성하길 원하는 경우

🚫 메모이제이션의 주의사항

메모이제이션은 메모리에 특정 값을 저장한다.

따라서, 필요하지 않은 경우에도 메모이제이션을 남용할 경우 오히려 성능 저하가 유발될 수 있다.

동일한 입력 값으로 거의 호출하지 않을 경우 오히려 인수 직렬화 및 비교로 인해 성능이 저하될 수 있다.
이전의 모든 입력과 출력을 유지해야 하므로 메모리 사용량이 증가하여 성능이 저하될 수 있다.

위의 이유로 메모이제이션은 필요한 경우에 적절히 사용하는 것이 최적화에 중요한 부분이다.

✨ 마무리

아직 React 19를 안써봐서... 메모이제이션과의 상관관계를 모르겠다

리액트 컴파일러가 생겨서 그랬댔나... 흠... 내 짧은 지식으로는 거기까지 공부를 해봐야 확실히 알 듯.

조사한 내용만 생각해보면 꽤나 유용해보이지만 역시! 딱히 쓸 상황이 떠오르진 않는다!

실무 들어가게 해주세여...🥲 취업 할래~~~

- 요약

React.memo: 자식 컴포넌트의 불필요한 재렌더링을 방지하고 싶을 때 사용.
useMemo: 계산 비용이 큰 값의 재계산을 방지하고 특정 값이 변경될 때만 계산을 재실행하고 싶을 때 사용.
useCallback: 콜백 함수를 메모이제이션하여 자식 컴포넌트에 동일한 함수 참조를 전달하고, 특정 값이 변경될 때만 함수를 재생성하고 싶을 때 사용.