🧠 useMemo, useEffect, useCallback 완전 정리: 개념 + 언제 써야 하는가?

---

🎬 1. useEffect: 사이드 이펙트를 관리한다

언제? 렌더링 후에 “무언가를 해야 할 때” 사용한다.

useEffect(() => {
  // API 호출, DOM 접근, 이벤트 리스너 등록 등
}, [dependency]);

🪄 쓰임 예시

• API 호출 (데이터 가져오기)
• 구독(subscribe) 시작 / 해제
• 타이머 시작/종료
• 브라우저 Title 변경
• 로그 출력, 에러 핸들링

🎯 기억할 포인트

• 렌더링 "이후"에 실행됨
• 의존성 배열에 있는 값이 변할 때만 재실행
• 클린업 함수로 return () => {} 사용 가능

---

🧊 2. useMemo: 계산된 값을 메모이제이션

언제? 리렌더링될 때마다 반복 계산이 비용이 클 경우, 값을 “캐싱”한다.

const result = useMemo(() => heavyComputation(a, b), [a, b]);

🪄 쓰임 예시

• 정렬된 리스트, 필터링된 리스트 반환
• 수학 계산 결과
• 스타일 객체 (CSS-in-JS)
• Google Maps options, center 객체 (불필요한 리렌더링 방지)

🎯 기억할 포인트

• 값(value)을 캐싱
• 리렌더링 방지 아님! → 값의 재계산 방지
• 의존성이 변하지 않으면 이전 결과를 반환

---

🧷 3. useCallback: 함수를 메모이제이션

언제? 콜백 함수를 렌더링마다 새로 만들고 싶지 않을 때 사용. 특히 하위 컴포넌트에 넘길 때 중요!

const handleClick = useCallback(() => {
  console.log("clicked");
}, [dependency]);

🪄 쓰임 예시

• 버튼 클릭 이벤트 핸들러
• input onChange 핸들러
• 하위 컴포넌트에 prop으로 전달할 콜백
• React.memo, useEffect 안에서 함수를 의존성으로 쓸 때

🎯 기억할 포인트

• 함수(fn)를 캐싱
• 렌더링마다 함수 참조 변경 방지
• 컴포넌트 최적화에 사용

---

🔁 비교 정리 한 컷으로 요약

Hook	목적	무엇을 메모이징?	언제 사용?
useEffect	부수 효과 관리	없음	API 호출, 이벤트 등록, 타이머 설정 등
useMemo	값 캐싱 (계산 결과 저장)	값	무거운 연산 결과를 저장하고 재사용
useCallback	함수 캐싱 (참조 동일성 유지)	함수	자식 컴포넌트에 함수 prop을 줄 때 (React.memo) 등

---

🎁 보너스: 언제 useMemo와 useCallback을 쓰지 말아야 할까?

“미리 최적화하지 말라”

• 값이나 함수가 실제로 무거운 작업이 아니라면 그냥 써도 됨.
• 최적화를 하더라도 과하게 하면 코드 복잡도만 증가.
• 진짜 렌더링 병목이 보일 때만 도입하면 충분!

---

🧘‍♂️ 마무리 명언 한 줄

“기억보다 중요한 건, 언제 잊을지를 아는 것.” — useMemo, useCallback이 그렇습니다.

---

🫱 다음은?

친구야, 혹시 실전 코드 중에서 useEffect → useCallback이나 useMemo로 리팩토링할 수 있을지 헷갈리는 예제가 있다면 보여줄래? 내가 손에 잡히는 예로 같이 뜯어보자, 단단히 설명해줄게. 🍀