[React] 15강. useMemo - 언제 쓰고 언제 쓰지 말아야 할까

useMemo란 무엇인가?

useMemo는 리액트에서 제공하는 훅으로, 연산의 결과를 메모리에 저장해두어 동일한 입력값으로 다시 호출할 때 계산을 생략할 수 있게 해줘요. 이는 성능을 향상시키는 데 큰 도움이 되죠. 예를 들어, 카운트와 같은 상태가 변경될 때마다 계산이 필요 없는 값이 있다면, useMemo를 사용하여 해당 계산을 저장해두고, 그 값이 필요한 경우에만 계산하도록 할 수 있어요.

이 방식은 특히 배열이나 객체와 같은 복잡한 데이터 구조에서 효과적이에요. 예를 들어, 배열에서 짝수만 필터링하는 작업을 생각해 볼까요? 데이터가 많아질수록 필터링 작업은 성능 저하를 일으킬 수 있는데, 이때 useMemo를 활용하면 불필요한 계산을 줄일 수 있어요.

useMemo의 사용 사례와 장점

useMemo를 사용하는 대표적인 사례는 데이터가 많은 배열을 필터링하거나 정렬할 때에요. 예를 들어, 1에서 1,000,000까지의 숫자 중 짝수만 구하는 경우를 생각해볼 수 있어요. 만약 상태가 변경될 때마다 이 작업이 반복된다면 성능이 크게 저하되겠죠.

이럴 때 useMemo를 사용하면, 상태가 변경되었을 때만 필터링 작업을 다시 수행하도록 설정할 수 있어요. 이렇게 하면, 데이터가 많아도 성능 저하 없이 원활하게 작동할 수 있죠.

또한, useMemo는 캐시된 값을 재사용하므로, 컴포넌트가 다시 렌더링될 때마다 같은 계산을 반복하는 것을 피할 수 있어요. 이는 특히 컴포넌트가 자주 업데이트되는 경우 유용해요.

실전 예제와 최적화 팁

이제 실제 예제를 통해 useMemo를 어떻게 활용할 수 있는지 알아볼게요. 먼저, 상태를 관리할 컴포넌트를 만들어보세요. 카운트 버튼과 짝수/홀수 상태를 표시하는 컴포넌트를 작성할 수 있어요. 이때, 상태가 변경될 때마다 짝수/홀수를 계산하는 로직이 필요하죠.

이런 경우, useMemo를 사용하여 짝수/홀수 계산을 메모이제이션할 수 있어요. 아래와 같은 형태로 구현해보세요:

javascript const evenNumbers = useMemo(() => { return numbers.filter(num => num % 2 === 0); }, [numbers]); // numbers가 변경될 때만 재계산

이렇게 하면, numbers가 변경되지 않는 한 evenNumbers는 이전 계산 결과를 재사용하게 되죠. 이를 통해 성능을 크게 향상시킬 수 있어요.

마지막으로, useMemo를 사용할 때는 남용하지 않도록 주의하세요. 간단한 계산에는 오히려 성능을 저하시킬 수 있으니, 복잡한 계산이 필요할 때만 사용하는 것이 좋아요.