[React] useMemo (ft. 재연산 최적화)

 

 

 

 

 

💡최적화  

코테를 준비하면서도, 애플리케이션 개발을 하면서도 항상 신경써야한다고 누누히 들은 코드 최적화.. ! 두둥.. 

리액트 애플리케이션을 개발할 때 역시 마찬가지이다.

 

 

리액트에서는 '렌더링과 연산'이 성능에 큰 영향을 미친다.

특히, 상태( state) 가 변경될 때마다 불필요한 연산이나 렌더링이 반복되면 전체 성능이 저하될 수 있다.

 

 

 

 

 

 

리액트 최적화를 위해 지양해야할 요소들은 아래와 같다.

 

1. 불필요한 렌더링

2. 컴포넌트 내부의 불필요한 연산

3. 컴포넌트 내부의 불필요한 함수 재생성

 

 

 

 

이중 useMemo 훅은 React의 불필요한 연산을 막아 최적화한다.

 

 

 

 

 

 

---

 

 

 

💡useMemo 

: 특정 연산의 결과를 메모이제이션(memoization) 하여 불필요한 연산(재연산)을 방지하는 React Hook.

-> 의존성 배열에 명시된 값이 변경될 때에만 콜백 함수의 해당 연산을 다시 수행한다.

그렇지 않으면, 이전에 계산된 값을 그대로 재사용함.

 

 

*원래는 컴포넌트가 렌더링 될때마다 함수 내부의 연산이 항상 재실행되는데,

이 과정에서 무거운 연산이 반복되거나 불필요한 배열 탐색이 지속적으로 발생하면 성능에 부담이됨.

 

 

 

 

 

 

useMemo는 아래와 같은 형태를 가진다.

const memoizedValue = useMemo(() => {
  // 연산할 내용
  return 계산된값;
}, [의존성값1, 의존성값2]);

 

 

• 첫 번째 인자는 연산을 수행하는 함수이다.
• 두 번째 인자인 의존성 배열은, 해당 값들 중 하나라도 변경되었을 때만 첫 번째 함수가 다시 실행되도록 한다.
• useMemo는 계산된 값을 memoizedValue에 저장하고, 필요 시 이를 재사용한다.

 

 

 

 

 

 

찐 예시로 코드 동작을 파악해보자! 

 

ex.

Todo List 앱에서 완료한 일, 완료하지 않은 일, 전체 할 일의 개수를 화면에 렌더링 하는 코드에서 useMemo를 적용시킬 것임.

 

const { totalCount, doneCount, notDoneCount } = useMemo(() => {
  console.log("getAnalyzedData 호출!");
  const totalCount = todos.length;
  const doneCount = todos.filter((todo) => todo.isDone).length;
  const notDoneCount = totalCount - doneCount;

  return {
    totalCount,
    doneCount,
    notDoneCount
  };
}, [todos]);

• todos 상태가 변경될 때에만 연산을 다시 수행함.  -> 의존성 배열
• 완료된 항목과 미완료 항목의 개수를 계산하는 로직은 filter()를 통해 반복 연산을 포함하므로, 상태가 자주 변경될 경우 불필요하게 리렌더링 비용이 증가할 수 있다. (배열을 계속해서 전체 탐색하기 때문..;) 
• 이를 useMemo로 감싸면, todos가 바뀌지 않는 한 이전의 계산된 값을 그대로 재사용하여 렌더링 성능을 최적화할 수 있다.

 

 

 

 

 

 

 

 

 

근데 생각해보니 전에 전에 filter()로 검색 기능 만들어 놓았던게 생각났다.

💡검색 기능과 useMemo는 함께 써야 할까?

const getFilteredData = () => {
  if (search === "") return todos;
  return todos.filter((todo) =>
    todo.content.toLowerCase().includes(search.toLowerCase())
  );
};

const FilteredTodos = getFilteredData();

 

검색 기능의 filter() 역시 useMemo는 함께 쓰는게 좋을까? 궁금해서 찾아보았음.

 

결론:

필터링 로직 자체와, 입력값( 검색창에 입력되는 값) 이 변경 될 때마다 동작하는 것까지는 자연스러운  UX 흐름으로 볼 수 있다고 한다.

 

BUT , 

만약 Todo 항목이 수 백개 이상으로 늘어나는 상황이라면, 이건 더이상 단순 검색 기능이 아니기 때문에 useMemo를 적용하는 것이 유리해짐! 

 

 

 

 

search 또는 todos가 변경될 때만 필터링 연산을 수행하도록 u

seMemo로 검색기능을 감싸 보았다.

const filteredTodos = useMemo(() => {
  if (search === "") return todos;
  return todos.filter((todo) =>
    todo.content.toLowerCase().includes(search.toLowerCase())
  );
}, [search, todos]); 

 

위처럼 useMemo로 감싸는 경우,

의존성 배열에 포함된 search와 todos는 둘 중 하나만 변경되어도 연산이 다시 수행됨.

 

search 가 바뀌면 → 필터링 기준(검색어)이 달라짐, 연산 다시 수행

todos가 바뀌면 → 필터링 대상 목록이 바뀜, 연산 다시 수행

 

 

 

하지만 기억할 건 무조건 useMemo를 사용하는 것이 아닌, 

코드 흐름 , 성능을 따져가며 사용해야 하는 것 ☺️

 

 

 

 

 

 

---

 

💡정리

 

React의 useMemo 훅은 단순히 성능 최적화를 위한 도구가 아니라,

컴포넌트의 동작을 예측 가능하게 만들고 불필요한 렌더링을 방지하는 중요한 수단.

 

 

Q. 언제 씁니까?

• 반복적인 연산이 있는 경우
• 연산 결과가 변하지 않아도 자주 렌더링되는 컴포넌트
• 리스트나 테이블처럼 항목이 많아질 수 있는 구조

이런 상황에서는 useMemo의 도입이 필수적이다.

단, 모든 계산에 무조건적으로 사용하는 것은 오히려 코드 복잡도만 높일 수 있으므로, 연산 비용과 빈도를 고려하여 적용하는 것이 좋다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

*Ref

https://ko.react.dev/reference/react/useMemo

useMemo – React

설명이 부족한 부분이나 피드백은 댓글로 남겨주세요!

감사합니다 ☺️