useEffect 완전 정리

useEffect는 리액트 컴포넌트에서 렌더링 후 실행되는 사이드 이펙트(Side Effect) 를 처리하기 위한 Hook이다.
API 호출, 이벤트 등록, 타이머 설정, 외부 라이브러리 연동 등 "렌더링 외적인 작업"을 담당한다.

---

✅ 1. useEffect 기본 문법

useEffect(() => {
  // 실행 내용
});

✔ 의존성 배열이 없으면 렌더링될 때마다 실행된다.

---

✅ 2. 의존성 배열(Dependency Array)에 따른 실행 시점

useEffect는 세 가지 패턴을 가진다.

---

🔹 ① 의존성 배열 없음 — 모든 렌더링마다 실행

useEffect(() => {
  console.log("렌더링마다 실행");
});

• 최초 렌더링 ✔
• state 변경으로 인한 리렌더링 ✔
• 부모 컴포넌트 리렌더에 의해 자식도 리렌더링되면 ✔
  → 즉, 매 렌더링마다 실행

---

🔹 ② 빈 배열 [] — 처음 한 번만 실행 (Mount)

useEffect(() => {
  console.log("마운트 될 때 한 번만 실행");
}, []);

• 최초 렌더링 시 1회 실행
• 이후 state 변경이 일어나도 실행되지 않음
• 초기 데이터 로딩(Ajax), 초기 설정에 사용

---

🔹 ③ 특정 값 변경 시 실행 — 선택적 실행

useEffect(() => {
  console.log("count 변경됨!");
}, [count]);

• 최초 렌더링 시 1번 실행
• 배열 안의 값이 바뀔 때만 실행
• 여러 값도 가능: [a, b, c]

→ 명확한 조건이 있을 때 사용

---

🔥 3. Cleanup(정리 함수)

useEffect는 return을 통해 정리(clean-up) 작업을 수행할 수 있다.

useEffect(() => {
  console.log("이벤트 등록!");

  return () => {
    console.log("이벤트 정리!");
  };
}, []);

✔ 언마운트 시 실행
✔ 의존성 값 변경으로 useEffect가 재실행될 때 이전 effect 정리 후 새 effect 실행
→ 이벤트 리스너 제거, 타이머 해제 등에서 필수

---

🧩 4. 실행 타이밍 요약

패턴	실행 시점
useEffect(() => {})	모든 렌더링 후
useEffect(() => {}, [])	최초 1회 (Mount)
useEffect(() => {}, [value])	Mount + value 변경 시
cleanup 함수	재실행 전 & 언마운트 시

---

📌 5. 실제 예제로 보는 차이점

useEffect(() => {
  console.log("useEffect!!", count);
});

→ 버튼 클릭해서 count가 바뀔 때마다 매 렌더링마다 실행

---

useEffect(() => {
  console.log("useEffect!!", count);
}, []);

→ 처음 한 번만 실행, 이후 count 변경과 관계 없음

---

🚀 6. useEffect를 사용해야 하는 상황

상황	사용 여부
단순 state 변경 처리	❌ 필요 없음
컴포넌트가 나타난 직후 해야 할 작업	✔ 필요
API 호출(데이터 로딩)	✔
DOM 접근 (scroll, focus 등)	✔
이벤트 리스너 등록	✔ (cleanup 필수)
setInterval / setTimeout	✔ (cleanup 필수)
외부 라이브러리 초기화	✔

---

🎯 최종 요약

useEffect는 "렌더링 이후 실행되는 작업"을 담당한다.
[] 없음 → 모든 렌더링마다 실행
[] → 최초 1회 실행
[count] → count가 변경될 때 실행
cleanup → effect가 다시 실행되기 전 또는 언마운트 시 실행

---