React Hooks 베스트 프랙티스 - 실무에서 자주 놓치는 포인트

React Hooks는 함수 컴포넌트에서 상태와 생명주기를 다루는 강력한 도구입니다.
이 글에서는 useState, useEffect, useCallback, useMemo 등을 실무에서 올바르게 사용하는 방법과 자주 발생하는 실수들을 정리합니다.

---

1. useState 초기값과 함수형 업데이트

// ❌ 나쁜 예: 객체를 직접 수정
const [user, setUser] = useState({ name: "", age: 0 });
setUser({ ...user, name: "kwkang" });

// ✅ 좋은 예: 함수형 업데이트
setUser((prev) => ({ ...prev, name: "kwkang" }));

• 함수형 업데이트는 이전 상태를 기반으로 안전하게 업데이트할 수 있습니다.
• 여러 setState가 연속으로 호출될 때도 최신 상태를 보장합니다.

---

2. useEffect 의존성 배열 관리

// ❌ 나쁜 예: 의존성 누락
useEffect(() => {
  fetchData(userId);
}, []); // userId가 바뀌어도 재실행 안 됨

// ✅ 좋은 예: 의존성 명시
useEffect(() => {
  fetchData(userId);
}, [userId]);

• ESLint의 exhaustive-deps 규칙을 활성화하고 경고를 무시하지 말 것
• 함수나 객체를 의존성에 넣을 때는 useCallback/useMemo로 메모이제이션 고려

---

3. useCallback과 useMemo 남용 주의

// ❌ 나쁜 예: 모든 함수를 메모이제이션
const handleClick = useCallback(() => {
  console.log("clicked");
}, []);

// ✅ 좋은 예: 자식 컴포넌트에 props로 전달하거나, 의존성이 복잡할 때만
 handleClick = ( {
  (id);
}, [id, onItemClick]);