[React] 성능 최적화하는 훅 useMemo

리액트를 쓰다 보면 리렌더링 될 때마다 함수나 계산이 다시 실행되는 현상 때문에 성능 이슈가 생기는 경우가 있습니다.

 

특히 .filter() 나 .map(), .sort()처럼 반복 계산이 많은 연산은 불필요하게 반복되면 리액트의 퍼포먼스를 갉아먹습니다.

그래서 등장하는 게 바로 ⭐useMemo 입니다.

실무에서 자주 쓰이는 useMemo의 개념과 예제에 대해 어떻게 쓰이는지 정리하였습니다.

📂 목차

 

---

useMemo란?

const memoizedValue = useMemo(() => {
  return 계산식;
}, [의존성])

💡 한마디로 말하면?

"의존성 값이 바뀔때만 다시 계산되는 값" 을 만들어서, 불필요한 계산을 막아주는 훅

 

🔍 왜써야할까?

리액트는 컴포넌트가 리렌더링될 때마다 내부 코드를 다시 실행하는데, 연산(filter, map, sort 등..)을 매번 실행하면 성능에 영향을 줍니다.

그래서 값을 기억해두고, 의존성이 바뀔 때만 다시 계산하도록 해주는게 useMemo입니다.

 

 

예제 코드

const categoryList = [
 {id: 1, name:"셀프개통", type: "normal"},
 {id: 2, name:"대리점개통", type: "agent"},
]

const filteredCategories = useMemo(() => {
// 통신사가 KT인 경우에만 "normal" 타입 카테고리만 필터링
 return selectedCarrier == "KT"
   ? categoryList.filter((category) => category.type === "normal")
   : categoryList;
}, [selectedCarrier, categoryList]);

예를 들어, 사용자가 선택한 통신사(`selectedCarrier`)가 "KT"일 경우에만 특정 카테고리 (`type == "normal"`)만 보여주고 싶다고 가정해보겠습니다.

이럴때, .filter()를 매번 실행하면 비효율적일 수 있으니, 예제코드 처럼 useMemo를 사용하면 렌더링 최적화가 가능합니다.

 

그래서 useMemo를 사용하면:

• 불필요한 연산을 줄이고 의존성(selectedCarrier, categoryList)이 바뀔 때만 계산
• 그 외에는 캐시된 결과 사용