[React] useMemo

컴포넌트 최적화를 위해 사용되는 대표적인 hook은 useMemo와 useCallback이 있다.

먼저 useMemo 대해서 파헤쳐보자.

 

불필요한 리렌더링을 줄여서 성능을 최적화한다

Memo는 memorized를 의미하는데, 이전에 계산 한 값을 재사용한다는 의미를 가지고 있다.

 

동일한 값을 리턴하는 함수를 반복적으로 호출할 경우 맨 처음 값을 메모리에 저장해서 필요할 때마다 또다시 계산하지 않고 메모리에서 꺼내서 재사용을 하는 기법이다.

간단히 말해서 자주 필요한 값을 맨 처음 계산할 때 캐싱 해놓아서 그 값이 필요할 때마다 다시 계산을 하는 것이 아니라 캐시에서 꺼내서 사용하는 것이다.

함수형 컴포넌트는 함수다. 함수형 컴포넌트가 렌더링이 된다는 것은 그 함수가 호출된다는 것이고 그때 함수 내부에 정의해놓은 내부 변수가 초기화된다.

예시를 보면서 이해해 보자.

 

function calculate(){
	return 10
}

function Component(){
	const value = calculate();
  	return <div>{value}</div>
}

 

컴포넌트는 state 와 props의 변화로 인해 수많은 렌더링을 거친다. 컴포넌트가 렌더링이 될 때마다 위 코드의 value 변수는 초기화가 된다. 렌더링이 될 때마다 calculate() 함수는 반복적으로 호출이 될텐데 이는 효율적이지 못하다. 만약 calculate() 함수가 무거운 일을 하는 함수라면 굉장히 비효율적일 것이다. 왜냐하면 같은 값을 value에 할당하는 무의미한 작업을 계속해서 반복하기 때문이다.

 

useMemo는 처음에 계산된 결과값을 메모리에 저장해서 컴포넌트가 반복적으로 렌더링 되어도 계속 calculate() 함수를 호출하지 않고 이전에 이미 계산된 결과값을 메모리에서 꺼내와서 재사용 할 수 있게 해준다.

 

const value = useMemo(()=> {
  return calculate();
}, [item])

 

- useMemo는 두개의 인자를 받는다. 첫 번째는 콜백 함수, 두 번째는 배열을 받는다.

- 첫 번째 인자인 콜백 함수는 메모이제이션을 해줄 값을 계산해서 리턴해 주는 함수이다. 즉 이 콜백 함수가 리턴하는 값이 바로 useMemo가 리턴하는 값이 된다.

- 두 번째 인자인 배열은 의존성 배열이라고 부르는데 useMemo는 배열 안의 요소의 값이 업데이트될 때만 콜백 함수를 다시 호출해서 메모이제이션 된 값을 업데이트해서 다시 메모이제이션을 한다.

- 빈 배열을 넘겨주면 컴포넌트가 처음 마운트 되었을 때만 값을 계산하고 이후에는 항상 메모이제이션된 값을 꺼내와서 사용한다.

 

하지만 useMemo도 무분별하게 남용하면 오히려 성능면에서 좋지 않다.

useMemo를 사용한다는 것은 값을 재활용하기 위해서 따로 메모리를 소비해서 저장하는 것인데 그렇기 때문에 불필요한 값까지 전부 메모이제이션을 하면 성능에 좋지 않기 때문이다. 그러니 필요할 때만 적절하게 사용하자