[React] useMemo vs useRef

최근 성능 최적화에 대해서 공부하던 중 " useMemo와 useRef의 차이가 뭘까? " 에 대해서

궁금증이 생겼다. 

 

둘을 비교하려면 우선 각각 뭔지에 대해서 짧게 알아보자!

 

useMemo 란?

React는 DOM에 변화가 있을 때마다 렌더링을 하는데, 

현재 컴포넌트가 리렌더링 되더라도 값의 변화가 없는 경우에 똑같이 리렌더링을 한다면 

쓸대없이 자원을 낭비하게 된다. 

 

그래서 변화가 생겼을 때, 현재 함수에 유의미한 변화를 발생시키는 경우에만 

연산을 다시 수행하게 해주는 것이 useMemo이다. 

 

즉, 컴포넌트 내부에서 발생하는 연산을 최적화시켜주는 Hook이다. 

const result = useMemo(countingCallback, [deps]);

deps 배열에 들어있는 상태가 변경될 때만 연산을 다시 수행하고 그게 아니라면 

메모이징한 결과값을 재사용한다. 

 

useRef 란? 

간단하게 말해서 특정한 " 값 "을 리렌더링과 상관없이 기억하고 있을 경우에 사용한다. 

 

정확한 사용처는 

1.  DOM에 직접 접근해야 하는 경우 
2. 특정한 값을 저장하고 리렌더링이 발생하더라도 가지고 있게 하기 위함

const audioRef = useRef(new Audio());

audioRef가 useRef에 설정한 데이터(new Audio)는 current에 저장되는데, 

컴포넌트가 리렌더링이 발생하더라도 current의 값을 변경되지 않는다. 

 

그래서 useRef vs useMemo 는? 

useMemo는 연산의 결과 값을 저장하기 위해서 사용하고, 

useRef는 특정한 값을 저장하기 위해서 사용한다.