useMemo in React: Value Memoization for Performance Optimiza

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()가 실행되어 성능 저하.

- 해결책: useMemoitemsfilterText 의존성만 변경 시 필터링을 실행.

- 코드 예시:

```jsx

const filteredItems = useMemo(() => items.filter(...), [items, filterText]);

```

4. `useMemo` vs `useCallback`

- useCallback함수 참조를 메모화하는 반면, useMemo계산 결과를 메모화한다.

- useMemo비용이 많이 드는 계산에, useCallback함수 재생성 방지에 적합하다.

결론

  • useMemo의존성 변경 시만 계산을 수행하여 성능을 향상시킨다.
  • 대규모 목록 필터링이나 반복 계산 시 반드시 사용할 것.
  • useCallback과 혼동하지 말고, 값 메모화가 필요한 경우에만 useMemo를 사용해야 한다.