🧠 1. React에서의 useEffect 완전 정복

---

React를 쓰다 보면 useEffect는 진짜 너무 자주 마주치는데,
그만큼 쓰임새도 많고, 또 잘못 쓰면 예상치 못한 리렌더링이 생기거나 무한 루프에 빠지기도 하더라.
그래서 이번에 제대로 한번 정리해봤다.

---

✅ useEffect란?

컴포넌트가 렌더링된 이후에 실행되는 훅.
흔히 말하는 사이드 이펙트를 처리할 때 사용한다.

예를 들어 API 호출, 타이머 설정, 이벤트 등록 같은 작업들이 대표적이다.

import { useEffect } from 'react';

useEffect(() => {
  console.log('컴포넌트가 마운트될 때 실행된다!');

  return () => {
    console.log('컴포넌트가 언마운트될 때 정리된다!');
  };
}, []);

---

✅ 의존성 배열이 핵심이다

useEffect의 두 번째 인자 []가 진짜 핵심이다.
의존성 배열에 따라서 실행 타이밍이 완전히 달라진다.

의존성 배열	실행 시점
없음	매번 리렌더링될 때마다 실행됨
[]	처음 마운트될 때 한 번만 실행
[값1, 값2]	해당 값이 변경될 때만 실행됨

useEffect(() => {
  console.log('count가 바뀔 때마다 실행됨');
}, [count]);

---

✅ 정리(clean-up)도 중요하다

특히 타이머나 이벤트 리스너 쓸 때는 꼭 정리(clean-up)를 해줘야 한다.
안 그러면 메모리 누수나 이상한 버그 생김...

useEffect(() => {
  const interval = setInterval(() => {
    console.log('3초마다 실행!');
  }, 3000);

  return () => {
    clearInterval(interval); // 꼭 정리해주자!
  };
}, []);

---

✅ 주로 이런 곳에서 많이 씀

• API 요청
• setTimeout / setInterval
• 외부 라이브러리 연동 (예: 차트, 지도 등)
• window 이벤트 등록 (resize, scroll 등)
• 로컬 스토리지 읽기

---

📝 내가 느낀 점

처음엔 useEffect는 그냥 써야 하는 것 같은 느낌이었는데,
이제는 이 훅이 왜 필요한지, 그리고 언제 어떻게 실행되는지 조금 감이 온다.
특히 의존성 배열을 잘못 넣으면 무한 렌더링 나오는 것도 이제는 조심할 수 있을 듯!

---

"화면에 보여지는 게 전부가 아니다. 그 뒤에서 벌어지는 일들을 다룰 땐 useEffect."