React Hooks - useEffect

1️⃣ useEffect란?

컴포넌트가 렌더링된 이후에 실행되는 코드 (부수효과, Side Effect)를 작성하기 위한 React Hook이다.
React의 생명주기(lifecycle) 개념과 직결된 Hook이다.

💡 부수효과?

• 데이터 불러오기
• 브라우저의 로컬 스토리지에 값을 저장
• console에 log를 출력
• DOM 이벤트 등록

컴포넌트 외부 세계에 영향을 주는 행위 -> 렌더링 이후에 어떤 일을 할지 React에게 알려주는 역할

---

2️⃣ 기본 문법

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

1. () => { ... } : 실제로 실행할 함수를 작성하는 부분
   -> 렌더링 후 수행할 동작이 들어간다.
   
   
2. [의존성] : 언제 함수가 실행될지 결정하는 부분
   -> 의존성 배열(dependency array)라고 부른다.

---

3️⃣ 의존성 배열의 세 가지 패턴

🟢 의존성 배열이 없는 경우

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

• 컴포넌트가 렌더링 될 때마다 실행 : State(상태) 가 바뀔 때마다 계속 실행
• 무한 렌더링이 일어날 수 있음.
• ex> 개발 중 디버깅용 로그 출력으로 사용 가능

🟢 빈 배열 [] 인 경우

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

• 컴포넌트가 처음 화면에 나타날 때 한 번만 실행
• 상태가 변경되어도 실행되지 않음
• 초기 데이터 블러오기(API 요청) 등에 사용

useEffect(() => {
  fetchData(); // 처음 렌더링 시 서버에서 데이터 불러오기
}, []);

🟢 특정 값이 있을 때

useEffect(() => {
  console.log('count 값이 바뀔 때마다 실행됩니다!');
}, [count]);

• count 값이 변경될 때 마다 실행
• 즉, 의존성 배열 안의 값이 바뀔 때만 실행
• ex) 폼 입력 값 변경될 때 자동 저장 / 특정 상태값이 변할 때 서버에 전송 필요시

---

4️⃣ 클린업(Cleanup) 함수

useEffect(() => {
  console.log('이벤트 등록');
  window.addEventListener('resize', handleResize);

  return () => {
    console.log('이벤트 해제');
    window.removeEventListener('resize', handleResize);
  };
}, []);

• return 문은 컴포넌트가 화면에서 사라질 때(언마운트 시) 실행.
• 등록했던 이벤트 리스너나 타이머 등을 정리(Clean-up)해 메모리 누수나 불필요한 동작을 막기 위한 코드(함수)

---

🧩 간단 예제 — Todo List에서의 useEffect

useEffect(() => {
  localStorage.setItem('todos', JSON.stringify(todos));
}, [todos]);

• 앱 시작 시 -> localStorage에서 기존 데이터 불러옴
• todos가 바뀔 때마다 다시 저장

💡 localStorage / JSON.stringify

• localStorage : 브라우저가 제공하는 작은 데이터 저장소
  -> 페이지 새로고침해도 데이터 삭제 X
• JSON.stringify() : 자바스크립트 객체 (object) -> 문자열
• JSON.parse() : 문자열 -> 자바스크립트 객체 (object)

---

⚠️ 사용 시 주의사항

처음 사용 시 의존성 배열을 잘못 다루는 실수를 자주 함.

useEffect(() => {
  setCount(count + 1);
});

렌더링 -> count 변경 -> 다시 렌더링 -> useEffect 실행 -> 다시 count 변경

• 무한 렌더링 발생

해결법

useEffect(() => {
  setCount(count + 1);
}, []); // mount 시 1회만 실행

useEffect(() => {
  console.log(count);
}, [count]); // count가 변할 때만 실행

---

💬 정리

useEffect는 컴포넌트가 렌더링된 후, 특정 상황에서 실행할 코드를 등록하는 Hook 이다.

• 빈칸 : 렌더링 될 때 마다
• [] : 처음 한 번만
• [state] : 특정 값이 바뀔 때
• return : 정리(Clean-up) 함수