React / useMemo() 훅 정리

 

 

useMemo()

 

- useMemo는 연산비용이 큰 계산 결과를 메모리제이션해서 불필요한 재계산을 막아주는 훅이다.

 

- 개발자는 이 훅을 사용할때  값이 다시 계산될 필요가 있는지,

- 필요한 경우에만 다시 계산을 해야하는지 확인하고 사용해야 한다.

 

사용법

 

const memoizedValue = useMemo(() => {

 

// 계산 로직

return 결과값;

 

}, [dependencies]);

 

// dependencies(의존성 배열)이 변경되었을 때만 콜백 함수가 다시 실행된다.

// 그 외 렌더링에서는 이전에 계산한 값을 재사용한다.

 

useMemo가 필요한 이유

 

React 컴포넌트는 상위 컴포넌트가 렌더링될 때마다 자식도 기본적으로 재렌더링 된다.

 

이때 리스트를 필터링/정렬하는 연산, 무거운 계산, 의존 데이터가 변하지 않았는데, 매번 계산되는 경우 등

성능문제가 발생하는데 이러한 불필요한 재계산을 막아주는 것이  useMemo의 역할이다. 

 

ex)

const doneCount = useMemo(() => {

  return todos.filter(todo => todo.isDone).length;

}, [todos]);

 

// 여기서 todos가 변경될 때만 filter 작업을 수행한다.

 

의존성 배열을 잘 설정해야 하는 경우

 

- 의존성 배열을 잘못 입력하면, 해당 입력된 경우, 아무것도 입력하지 않았다면, 해당 컴포넌트가 실행될때 

  한번만 해당 기능을 수행하기 때문에, 동작을 수행하지 않는다. 

 

- React 19에서는 useMemo에서 의존성배열의 값이 내부 콜백함수가 사용하는 state와 일정 이상의 

  추론값이 다르다고 느껴진다면, 컴파일 경고가 뜨면서 개발자가 수동으로 작성한 deps 배열을 믿을 수 

  없다고 한다....

 

- useMemo를 잘 사용하면 성능이 상당히 좋아지는 이러한 장점들이 있지만, 오로지 성능 최적화를 위해

  해당 훅에만 매몰된다면, 유지보수가 상당히 까다로워지기 때문에 체감이 느껴지는 최적화 수준상에서만

  사용을 하는것이 좋다.