useMemo in React: 성능 최적화를 위한 값 메모화
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
React를 사용하는 개발자, 특히 성능 최적화에 관심 있는 중급~고급 개발자
핵심 요약
useMemo
는 불필요한 계산을 방지하기 위해 값의 메모화를 수행하는 React Hook이다.useMemo(() => computeExpensiveValue(dependencies), [dependencies])
구문으로 사용하며, 의존성 배열에 있는 값이 변경될 때만 계산이 재실행된다.useMemo
는 대규모 목록 필터링, 중복된 계산, 불필요한 렌더링을 최적화하는 데 주로 사용된다.
섹션별 세부 요약
1. `useMemo`의 목적
- useState
와 함께 사용하여 상태 변화 시 재계산을 방지한다.
- useMemo
는 계산 결과를 캐시하여, 의존성이 변경되지 않으면 재계산을 생략한다.
- 예시: sum(numbers)
함수가 매 렌더링마다 실행되지 않도록 메모화한다.
2. 문제점과 해결책
- 문제점: count
상태 변경 시 sum(numbers)
가 불필요하게 재실행된다.
- 해결책: useMemo
를 사용하여 numbers
의존성만 변경될 때 sum(numbers)
를 실행한다.
- 코드 예시:
```jsx
const total = useMemo(() => sum(numbers), [numbers]);
```
3. 목록 필터링 최적화
- 문제점: filterText
변경 시 매번 items.filter()
가 실행되어 성능 저하.
- 해결책: useMemo
로 items
와 filterText
의존성만 변경 시 필터링을 실행.
- 코드 예시:
```jsx
const filteredItems = useMemo(() => items.filter(...), [items, filterText]);
```
4. `useMemo` vs `useCallback`
- useCallback
은 함수 참조를 메모화하는 반면, useMemo
는 계산 결과를 메모화한다.
- useMemo
는 비용이 많이 드는 계산에, useCallback
은 함수 재생성 방지에 적합하다.
결론
useMemo
는 의존성 변경 시만 계산을 수행하여 성능을 향상시킨다.- 대규모 목록 필터링이나 반복 계산 시 반드시 사용할 것.
useCallback
과 혼동하지 말고, 값 메모화가 필요한 경우에만useMemo
를 사용해야 한다.