[기술면접] : useMemo와 useCallback

useMemo와 useCallback에 대해 설명해주세요.

결론

둘 다 React Hook에서 불필요한 랜더링과 연산을 제어하는 용도로 성능 최적화에 목적이 있는 Hook입니다.

---

설명

uesMemo와 useCallback을 이해하기 위해선 메모이제이션을 먼저 알 필요가 있습니다. 메모이제이션이란 기존에 수행한 연산의 결괏값을 어딘가에 저장해 놓고 동일한 입력이 들어왔을 때 이전의 값을 재사용하는 프로그래밍 기법입니다. 메모이제이션을 적절히 사용하면 연산의 중복을 방지함으로써 메모리를 좀 더 쓰더라도 애플리케이션 성능을 향상할 수 있습니다.
React에서 useMemo와 useCallback은 메모이제이션 기법을 사용하여 불필요한 랜더링 또는 연산을 제어하는 용도로 성능을 최적화한다는 점이 같습니다.
useMemo를 사용하면 함수의 컴포넌트 내부에서 발생하는 연산을 최적화할 수 있습니다. 랜더링 하는 과정에서 특정값이 바뀌었을 때만 연산을 실행하고, 원하는 값이 바뀌지 않았다면 이전에 연산했더 너 결과를 다시 사용하는 방식입니다. 즉 useMemo는 메모이제이션된 값을 반환합니다.
컴포넌트가 랜더링될때마다 내부적으로 사용된 함수가 새롭게 생성되는 경우나 자식 컴포넌트에 props으로 새로 생성된 함수가 넘겨지게 되면 불필요한 리 랜더링이 일어날 수 있습니다. 이때 useCallback을 사용하면 이전에 생성된 함수가 재사용됩니다. 즉, useCallback은 함수가 재생성되는 것을 방지하기 위한 목적으로 쓰입니다.

---

요약

uesMemo와 useCallback 둘다 불필요한 랜더링과 연산을 제어하는 용도로 성능 최적화에 목적이 있는 Hook입니다. 다만, useMemo는 함수의 연산량이 많을 때 이전 결괏값을 재사용하는 목적이고, useCallback은 함수가 재생성되는 것을 방지하기 위한 목적으로 쓰입니다.

---

좀 더 공부하기

메모이제이션