useEffect 완전 정복: 의존성 배열과 클린업 함수

import { useEffect, useState } from 'react'

function UserProfile({ userId }: { userId: string }) {
  const [user, setUser] = useState(null)

  useEffect(() => {
    // 사이드 이펙트: API 호출
    fetch(`/api/users/${userId}`)
      .then(res => res.json())
      .then(data => setUser(data))
  }, [userId]) // userId가 변경될 때마다 실행

  return <div>{user?.name}</div>
}

useEffect(() => {
  console.log('매 렌더링마다 실행됩니다')
})

useEffect(() => {
  console.log('컴포넌트가 마운트될 때 한 번만 실행됩니다')
}, [])

useEffect(() => {
  console.log(`count가 ${count}로 변경되었습니다`)
}, [count])

useEffect(() => {
  // 이벤트 리스너 등록
  const handleResize = () => {
    console.log('창 크기:', window.innerWidth)
  }
  window.addEventListener('resize', handleResize)

  // 클린업: 이벤트 리스너 제거
  return () => {
    window.removeEventListener('resize', handleResize)
  }
}, [])

// ❌ 잘못된 예: 객체를 의존성으로 사용
function BadExample() {
  const options = { page: 1 } // 매 렌더링마다 새 객체 생성

  useEffect(() => {
    fetchData(options) // options는 항상 새 참조 → 무한 루프
  }, [options])
}

// ✅ 올바른 예: 원시값을 의존성으로 사용
function GoodExample() {
  const page = 1

  useEffect(() => {
    fetchData({ page })
  }, [page]) // 원시값은 참조가 동일
}

// ❌ useEffect 콜백을 직접 async로 만들면 안 됨
useEffect(async () => {
  const data = await fetchData() // 이렇게 하면 안 됩니다
}, [])

// ✅ 내부에서 async 함수 선언 후 호출
useEffect(() => {
  async function loadData() {
    const data = await fetchData()
    setData(data)
  }

  loadData()
}, [])