React.memo vs useMemo vs useCallback 간단 정리 차이점

React.memo

컴포넌트가 렌더링 한 뒤, 이전 렌더링 된 결과와 비교하여 DOM 업데이트를 결정한다.

사용방법

const Mycomponent = React.memo((props)=>{return(렌더링 코드)})

props가 동일할 때 같은 결과를 렌더링 한다면 React.memo를 통해 불필요한 렌더링을 방지 할 수 있다.
즉 같은 props를 받는다면 레더링 과정을 건너뛰고 가장 최근에 렌더링한 결과를 보여준다.

다만, props의 변경 여부만 확인하기 때문에 내부에서 useState등을 사용할 경우 상태가 변경되면 렌더링된다. 또한 props를 shallow compare로 비교하기 때문에 object에 불변성을 고려해야 한다.

useMemo

사용방법

const memoize = useMemo(()=>fn(a,b), [a,b]);

useMemo는 2개의 인자를 전달 받는데, 첫 번째는 함수를 받고 두번째는 Dependencies array를 전달 받는다.
useEffect와 구조가 유사한 것 같다.
의존성 배열에 인자가 변한다면 1번째 인자로 받은 함수를 재실행한다. 또한 의존성 배열이 없다면 매번 렌더링 시 실행하게 된다.

유의사항

useMemo를 사용할 때 착각할 수 있는 부분이 모든 함수를 useMemo사용하면 최적화 할 수 있다는 생각이다. 물론 나도 처음엔 그렇게 생각했다.
다만 함수 실행이 별 게 아니라면 오히려 악영향을 끼칠 수 있다. useMemo는 간단한 함수보다 리소스가 클 수 있다는 뜻이다. 따라서 연산량이 많은 곳에 사용하면 좋다.

useCallback

useCallback은 훅으로 렌더링 성능을 위해 사용한다.

사용 방법

const myFn = useCallback(()=> fn(a,b),[a,b])

어떻게 보면 useMemo와 구조가 유사? 동일하다고 생각할 수 있다. 실 사용 예제를 통해 알아보자

...
const [name, setName] = useState("");
return (
...
<UserEdit onSave = {()=> saveMyMemo(name, age)}
...
)

이 코드를 보면 컴포넌트가 렌더링 될 때마다 UserEdit 컴포넌트에 saveMyMemoo 속성값으로 새로운 함수가 전달 된다. 여기서 name과 age가 같을 때에는 렌더링이 필요없지만 불필요한 렌더링이 일어나게 된다. 이때 useCallback을 사용할 수 있다.

const onSave = useCallback(()=> saveMyMemo(name,age), [name,age])
...
return
...
<UserEdit onSave = {onSave}
...

useMemo와 동일하게 함수와 의존성 배열을 인자로 받고 의존성 인자가 변하지 않는다면 이전에 실행한 함수가 사용되고 불필요한 렌더링을 줄일 수 있다.

공통점과 차이점

3가지 모두 불필요한 렌더링 혹은 연산을 제어하는 용도로 성능을 최적화 하는데 목적을 둔다.


다만 세부적으로 차이가 있는데,
형태를 보면 React.memo는 HOC이기 때문에 클래스형, 함수형 컴포넌트 모두 사용이 가능하지만 useMemo, useCallback은 훅이기 때문에 함수형 컴포넌트에서만 사용이 가능하다.

또한,
useMemo는 함수의 연산량이 많아 이전 결과값을 재사용하는 것이 목적이고, useCallback은 함수가 재생성 되는것을 방지하기 위한 목적이다.

참고 Develooger
참고 react 공문