useMemo
useMemo
는 memoized된 값을 반환한다.
useMemo
는 callback 함수와 의존성 배열을 받는다.
callback 함수에서는 useMemo
가 반환할 값을 생성하는 함수가 들어간다. 또한 의존성 배열의 값이 변경되었을 때에만 memoized된 값을 다시 계산하여 반환한다.
useMemo
를 사용하는 이유는 고비용 계산을 방지하기 위함이다.
모든 렌더링이 아니라 의존성이 변경되었을 때에만 값을 반환하기 때문에 최적화에 용이하고 쓸모 없는 계산을 방지해준다.
만일 의존성에 빈 배열이 들어간다면 매 렌더링 마다 새 값을 계산한다.
useMemo
를 사용하는 경우에 대해 예제를 통해 알아보도록 하자.
영화와 색상값을 입력받아 출력하는 React
예제이다.
해당 예제를 실행시키면 다음과 같은 결과가 나온다.
보이는가? movie
와 color
중 한 가지 값만 바뀌어도 두 함수가 실행되면서 console.log
가 출력된다.
위의 예제를 useMemo
를 사용하면 최적화를 시킬 수 있다.
useMemo
를 사용하니 최적화가 잘 된것을 확인할 수 있다.
지금처럼 재계산 하는 함수가 간단하면 큰 문제가 없지만 만일 재계산 하는 함수가 굉장히 복잡하다면 불필요한 비싼 비용이 발생할 것이다.useMemo
를 사용하면 이런 불필요한 비싼 비용이 발생하는 것을 막을 수 있다.
useCallback
useCallback
은 memoized된 함수를 반환한다.useMemo
와의 차이는 함수를 반환하느냐 값을 반환하느냐에 있다.
useMemo
와useCallback
를 적절하게 사용한다면 비싼 계산을 막고 컴포넌트 렌더링 최적화에 큰 도움이 될 것이다.
하지만 무분별한 사용은 memoization을 위한 메모리를 추가로 사용하게 되므로 적절하게 사용해야 한다.