🟦[React] useMemo, useEffect 차이

✅ 정리 비교

항목	useMemo	useEffect
언제 실행?	의존 배열 값이 바뀔 때	의존 배열 값이 바뀔 때
언제 쓰나?	복잡한 계산 결과를 캐싱할 때	비동기 요청, 이벤트 등록, 타이머 등
반환값	계산된 값	undefined (부수 효과만 있음)
실행 시점	렌더링 중에 계산됨	렌더링 후에 실행됨

 

// useMemo
const expensiveValue = useMemo(() => {
  return computeHeavyLogic(data);
}, [data]); // ← data가 바뀌면 다시 계산

// useEffect
useEffect(() => {
  fetch('/api/data?id=' + id)
    .then(res => res.json())
    .then(setResult);
}, [id]); // ← id가 바뀌면 새 요청

 

 

✅ 핵심 비교: useMemo vs useEffect

 

항목	useMemo	useEffect
목적	✅ 값을 계산하고 캐싱 (렌더링 중 실행)	✅ 부수 효과 처리 (렌더링 이후 실행)
주 사용처	● 무거운 연산 결과를 재사용 ● 리렌더링 시 불필요한 계산 방지	● API 요청 ● 타이머, 구독, 이벤트 핸들러 등록 등
예시	정렬된 배열, 필터링된 리스트, 계산된 통계값 등	서버 데이터 가져오기, addEventListener, setTimeout, 콘솔 로그 등
반환값	계산된 값	없음 (undefined)
실행 시점	컴포넌트 렌더링 중 (즉시)	렌더링 완료 후 (useLayoutEffect는 렌더 직후)
조건이 안 바뀌면?	캐시된 값 그대로 사용	실행 안 됨