React useEffect의 의존성 배열과 클린업

학습 내용:

• useEffect의 의존성 배열이 어떻게 작동하는지
• 클린업 함수의 중요성과 사용법
• useEffect 중첩을 피하는 방법

// ❌ 잘못된 예시 (현재 코드)
useEffect(() => {
  const loadData = async () => {
    const data = await fetchData();
    setData(data);
  };
  loadData();
}, [fetchData]); // fetchData가 매번 새로 생성됨

// ✅ 올바른 예시
useEffect(() => {
  let isMounted = true;

  const loadData = async () => {
    const data = await fetchData();
    if (isMounted) {
      setData(data);
    }
  };

  loadData();

  return () => {
    isMounted = false;
  };
}, []); // 의존성 최소화

---