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

1. 기본 개념

useEffect는 렌더링 이후 실행되는 함수

의존성 배열은 “언제 다시 실행할지”를 결정하는 조건

2. 3가지 핵심 형태

① 의존성 배열 없음

useEffect(() => {
  // 실행 코드
});

✔ 실행 시점= 매번 실행

최초 렌더링

이후 모든 리렌더링마다 실행

② 빈 배열 []

useEffect(() => {
  // 실행 코드
}, []);

✔ 실행 시점 = 최초 렌더링 1회만 실행

③ 값 포함 [value]

useEffect(() => {
  // 실행 코드
}, [value]);

✔ 실행 시점= 특정 값 변화 감지

최초 렌더링 1회

이후 value가 변경될 때만 실행

3. 비교 정리표

4. 동작 원리

React는 의존성 배열의 값을 이전 값과 비교(얕은 비교)

값이 다르면 → 실행

같으면 → 실행 안 함

5. 자주 틀리는 포인트

① 함수 넣으면 안됨! > 함수는 매 렌더마다 새로 생성되어 계속 실행되기 때문에

useEffect(() => {}, [fn]);

② 객체 / 배열 넣기 금지 > 참조값 변경되어 계속 실행됨

useEffect(() => {}, [obj]);

③ 의존성 일부러 생략하면 안됨!

경고 무시하면 상태 꼬임 / 버그 발생

6. 실전 사용 패턴

✔ 초기 데이터 요청

useEffect(() => {
  fetchData();
}, []);

✔ 특정 값 변경 시 API 호출

useEffect(() => {
  fetchData(category);
}, [category]);