[다시] 메모이제이션 Hooks (useMemo Vs useCallback)
2025. 3. 14. 10:52ㆍprogramming/React.js
useCallback과 useMemo는 모두 React에서 메모이제이션을 위해 사용하는 Hook이지만, 그 용도와 대상이 다르다.
1. 메모이제이션의 대상
useCallback: 특정 함수(function)를 메모이제이션 -> 컴포넌트가 리렌더링될 때 동일한 함수 인스턴스를 재사용하고 싶을 때 사용
useMemo: 특정 값(value)을 메모이제이션 -> 연산 결과를 저장하여 불필요한 재계산을 방지하고 싶을 때 사용
2. 사용 목적
✅ useCallback: 자식 컴포넌트에 전달되는 함수가 불필요하게 다시 생성되지 않도록 최적화하기 위해 사용합니다. 특히, 자식 컴포넌트가 React.memo로 감싸져 있을 때 효과적
예시:
const memoizedCallback = useCallback(() => {
doSomething();
}, [dependencies]);
✅ useMemo: 비용이 큰 연산을 저장하고, 상태나 props가 변경되지 않는 한 해당 값을 재계산하지 않도록 한다.
예시:
const memoizedValue = useMemo(() => computeSomething(), [dependencies]);
3. 반환 값
useCallback: 함수 자체를 반환합니다. 즉, 동일한 함수 참조를 유지합니다.
useMemo: 계산 결과 값을 반환합니다.
4. 리렌더링 영향
useCallback은 함수가 props로 전달될 때, 불필요한 렌더링을 방지할 수 있습니다.
useMemo는 연산 비용이 큰 계산으로 인해 발생하는 성능 저하를 줄이는 데 도움을 줍니다.
결론.
useCallback: "이 함수 새로 만들지 말고, 이전 것 써!"
useMemo: "이 값 다시 계산하지 말고, 이전 값 써!"
'programming > React.js' 카테고리의 다른 글
[다시] React Hooks + TypeScript (0) | 2025.03.14 |
---|---|
러닝리액트 요약 Day1 (0) | 2023.01.07 |
React / TS ] CRA로 프로젝트 생성 시, 절대경로 사용하기 (feat. craco) (0) | 2021.12.16 |
npm run start가 안된다면..!! ( 리액트 웹팩 버전 안 맞을 때 ) (0) | 2021.01.12 |