React의 useEffect는 컴포넌트의 생명주기(Lifecycle)와 연관된 작업을 수행하는 Hook
주로 **사이드 이펙트(Side Effect)**를 처리하는 데 사용되며, 다음과 같은 상황에서 활용된다:
📌 useEffect의 실행 시점과 동작 방식
✅ 1. 컴포넌트가 처음 마운트될 때 (처음 렌더링될 때 실행됨)
📌 실행 시점: 컴포넌트가 최초로 화면에 나타날 때(mount) 한 번만 실행됩니다.API 요청, 구독(subscription), 이벤트 리스너 추가 등의 작업을 할 때 유용함.
useEffect(() => { console.log("🎉 컴포넌트가 처음 마운트되었습니다!"); }, []);
// ✅ 빈 배열을 넣으면 최초 1회만 실행됨
useEffect(() => { fetch("https://jsonplaceholder.typicode.com/todos/1") .then((res) => res.json()) .then((data) => console.log("📌 데이터 가져오기 완료:", data)); }, []);
//이 코드에서는 컴포넌트가 처음 렌더링될 때 API 요청을 보냄이후 상태가 변경되거나 다시 렌더링되어도 useEffect는
//실행되지 않음
✅ 2. 컴포넌트가 업데이트될 때 (특정 값이 변경될 때 실행됨) - 의존성 배열
📌 실행 시점: 특정 상태(state)나 props가 변경될 때마다 실행.의존성 배열(Dependency Array)에 포함된 값이 변경될 때마다 useEffect가 다시 실행.
const [count, setCount] = useState(0); useEffect(() => { console.log(`🔄 count 값이 변경되었습니다: ${count}`); }, [count]);
// ✅ count 값이 변경될 때마다 실행됨
const [theme, setTheme] = useState("light"); useEffect(() => { console.log(`🌗 테마 변경됨: ${theme}`); document.body.className = theme; // 테마 변경 적용 }, [theme]);
// ✅ theme 값이 변경될 때마다 실행됨
✅ 3. 컴포넌트가 언마운트될 때 (제거될 때 실행됨)
📌 실행 시점: 컴포넌트가 사라질 때(unmount) 실행됨이벤트 리스너 제거, 타이머 해제, 구독 해제 등의 정리 작업(clean-up)이 필요할 때 사용
useEffect(() => { const handleResize = () => { console.log(`📏 윈도우 크기 변경됨: ${window.innerWidth}px`); }; window.addEventListener("resize", handleResize); return () => { console.log("🚀 컴포넌트 언마운트됨! 이벤트 리스너 제거"); window.removeEventListener("resize", handleResize); }; }, []);
// ✅ 빈 배열이므로 최초 마운트 시 실행됨, 언마운트 시 정리됨
✔️ window.addEventListener를 통해 윈도우 크기 변경 감지언마운트 시(return 함수 실행) removeEventListener를 호출하여 이벤트 리스너 제거만약 이벤트 리스너를 제거하지 않으면 메모리 누수(memory leak)가 발생할 수 있음
🎯 결론 1️⃣ [] (빈 배열): 마운트될 때 한 번만 실행 (API 요청, 초기 설정 등) 2️⃣ [의존성] (특정 값이 변경될 때 실행): state 값이 변경될 때 실행 (상태 관리) 3️⃣ return () => {...} (정리 작업): 언마운트될 때 실행 (이벤트 리스너 정리)
즉, useEffect는 비동기 데이터 요청, 이벤트 리스너 등록 및 해제, DOM 조작 등의 작업을 수행할 때 필수적인 Hook이라고 할 수 있음. 🚀
이건 내 프로젝트에 적용한 코드. 이렇게 설정하면 auth.isAuthenticated를 의존성 배열에 포함했기때문에
컴포넌트가 처음 렌더링될 때(마운트), 로그인 상태가 변경될 때 혹은 navigate 함수가 실행 될 때! 마다 실행됨
따라서 항상 최신 로그인 상태를 반영 할 수 있다.
여담 : useEffect를 항상 사용하지만 에러가 나면 90%는 모두 의존성 배열에 관한 에러였다.
