useEffect 의존성 배열 완전 정복 — 빈 배열, 값 포함, 생략의 차이에 대해 설명하세요

1. 의존성 배열 생략 (배열 없음)

형태: useEffect(() => { ... })

실행 시점: 컴포넌트가 화면에 그려질 때마다(초기 렌더링 + 상태 바뀔 때마다) 무조건 실행

특징: 과도한 실행으로 인한 성능 저하 및 무한 루프의 원인이 될 수 있어 실무에서는 거의 사용 안 함

2. 빈 배열 []

형태: useEffect(() => { ... },[])

실행 시점: 컴포넌트가 처음 화면에 나타날 때(Mount) 딱 한 번만 실행

용도: 초기 데이터 받아오기(API 호출), 타이머 시작, 이벤트 리스너 등록 등 1회성 초기화 작업에 최적

3. 값이 포함된 배열 [value]

형태: useEffect(() => { ... }, [value])

실행 시점: 처음 화면에 나타날 때 + 배열 안의 value 값이 바뀔 때마다 실행

용도: 검색어 변경 시 새로운 결과 불러오기 등 특정 값의 변화를 감지하고 반응해야 할 때 사용