useMemo : 리액트 훅 사용법

useMemo훅은 React에서 컴포넌트의 성능을 최적화하기 위해 사용되는 훅이다.

특정 연산의 결과를 메모이제이션하여 불필요한 재계산을 방지한다. 의존성배열에 변수가 변했을 경우에만 create함수를 호출해서 결과값을 반환하고 그렇지 않은 경우에는 기존 결과값을 그대로 반환한다.

주로 연산량이 높은 계산이나 데이터 변화로직에서 유용하게 사용되며 빠른 렌더링 속도를 얻을 수 있다.

 

useMemo 사용법

const memoizedValue = useMemo(
	() => {
		//연산량이 높은 작업을 수행하여 결과를 반환
		return computeExpensiveValue(의존성 변수1, 의존성 변수2);
	},
	[의존성 변수1, 의존성 변수2]
);

 

useMemo는 두 가지 매개변수를 받는다.

1. 첫 번째 매개변수 :

메모이제이션할 값을 반환하는 함수

이 함수는 React가 메모이제이션된 값을 다시 계산해야 할 때만 호출된다.

예: () => computeExpensiveValue(의존성 변수1, 의존성 변수2);

여기서 computeExpensiveValue(의존성 변수1, 의존성 변수2);는 실행 비용이 높은 연산이다.

 

2. 두 번째 매개변수 (의존성 배열) :

메모이제이션된 값이 갱신되어야 하는 조건을 정의하는 배열

배열에 포함된 값이 변경될 때만 첫 번째 매개변수의 함수가 다시 실행된다.

예: [의존성 변수1, 의존성 변수2] 여기서 의존성 변수1이나 의존성 변수2가 변경될 때만 함수가 실행되고, 변경되지 않으면 이전 결과를 재사용한다.

 

useMemo는 불필요한 연산을 줄이기 위해 사용되기 때문에 컴포넌트가 리렌더링 되더라도 의존성 배열에 있는 값이 변하지 않으면 이전에 계산한 값을 그대로 재사용한다.

 

실행 예시

const expensiveValue = useMemo(() => {
  console.log('연산 실행!');
  return someHeavyOperation(input);
}, [input]);

 

• input이 변경되지 않으면: someHeavyOperation은 다시 실행되지 않고 이전 계산 결과가 재사용된다.
• input이 변경되면: someHeavyOperation이 다시 실행되어 새 값을 계산한다.

이를 통해 불필요한 재계산을 방지하고, 애플리케이션 성능을 최적화 할 수 있다.

 

주의 사항

• useMemo를 남용하면 성능을 오히려 떨어뜨릴 수 있으므로 꼭 필요한 경우에만 사용하는 것이 좋다.
• useMemo는 캐싱된 값을 반환할 뿐, 내부 로직에서 상태를 업데이트하거나 사이드 이펙트가 발생하는 코드는 포함하면 안된다.