[React] React Hook - useMemo

컴포넌트 최적화에 사용되는 hook은 useMemo와 useCallback이 있다.

이번엔 useMemo 를 다룬다!

 

useMemo 란?

useMemo의 Memo 는 memoization 을 의미한다.

동일한 값을 리턴하는 함수를 반복적으로 호출해야할 때, 맨 처음으로 값을 계산할 때 그 값을 메모리에 저장해 필요할 때 마다 메모리에서 꺼내 쓰는 기법이다.

혹은 자주 쓰는 값을 맨 처음 계산할 때 캐시메모리에 저장해 재사용하는 것이다.

 

렌더링이란 Component 함수가 호출되는 것이다.

이렇게 함수가 호출될 때 마다 내부에서는 모든 변수가 초기화 되는 상황이 발생한다.

컴포넌트가 반복적으로 호출되어도 초기화 되지 않게끔 우리는 useMemo 를 사용할 수 있다.

 

useMemo 동작 순서

1. Component 가 호출되고, 계산된 결과 값을 메모리에 저장한다.

2. 렌더링이 일어난다(컴포넌트 재호출)

3. 메모리에 저장한 값을 불러와 재사용한다.

 

useMemo 쓰는 법

const memo = useMemo(() => {
  return 함수();
}, [item])

첫번째 인자인 함수( ) 는 메모리에 저장할 값을 리턴해주는 함수를 의미한다.

 

두번째 인자인 배열은 의존성 배열이다.

useMemo 는 배열안의 값이 업데이트 될때만 함수를 다시 호출해 메모리에 저장된 값을 업데이트 한다.

 

 

const memo = useMemo(() => {
  return 함수();
}, [])

이렇게 빈 배열을 가져왔을 땐 맨처음 컴포넌트가 마운트 되었을 때만 값을 계산해 메모리에 저장한다.

이후 메모리에 저장된 값을 가져와 사용하게 된다.

 

useMemo 사용시 주의점

값을 재활용하기 위해 메모리를 따로 사용해 값을 저장하는 방식이다.

그렇기 때문에 불필요한 값을 저장하며 메모리를 낭비하게 된다면 성능은 악화될 것이다.