[리액트] useEffect

📘 React의 생명주기(Lifecycle)와 useEffect

🔄 1. 컴포넌트 생명주기란?

React 컴포넌트는 화면에 등장하고, 업데이트되고, 사라지는 수명 주기(lifecycle)를 가짐.

생명주기 단계	설명
Mount(마운트)	컴포넌트가 처음 화면에 나타날 때
Update(업데이트)	state, props 등의 변화로 컴포넌트가 다시 렌더링될 때
Unmount(언마운트)	컴포넌트가 화면에서 제거될 때

⚙️ 2. useEffect로 생명주기 제어하기

useEffect(() => {
  // 실행할 작업
  return () => {
    // 클린업 작업
  };
}, [의존성]);

🔹 (1) Mount - 처음 1회 실행

useEffect(() => {
  console.log("처음 마운트 됐을 때 실행됨");
}, []);

빈 배열 []은 처음 한 번만 실행

클래스 컴포넌트의 componentDidMount()와 동일

🔹 (2) Update - 특정 state/props가 바뀔 때만 실행

useEffect(() => {
  console.log("count 값이 바뀔 때 실행됨");
}, [count]);

의존성 배열에 count가 있으면, count가 변경될 때마다 실행

클래스의 componentDidUpdate(prevProps, prevState)와 비슷

🔹 (3) Unmount - 컴포넌트가 사라질 때 정리 작업

useEffect(() => {
  const timer = setInterval(() => console.log("running..."), 1000);

  return () => {
    clearInterval(timer);
    console.log("컴포넌트가 사라질 때 정리됨");
  };
}, []);

return 안의 함수는 클린업 함수

componentWillUnmount() 역할

🧩 3. 의존성 배열(dependency array) 자세히

useEffect(..., [A, B]) 형태에서 [] 안에 들어가는 값들이 바로 의존성이야.
의존성 배열의 값이 변경될 때마다 useEffect가 다시 실행됨.

✅ 의존성 배열 사용 예시

형태	실행 타이밍
useEffect(() => { ... })	매 렌더링마다 실행
useEffect(() => { ... }, [])	처음 마운트 시 1회만 실행
useEffect(() => { ... }, [value])	value가 바뀔 때만 실행

---

+ 의존성 배열에 대한 궁금증

🧠 의존성 배열의 진짜 의미

useEffect는 이렇게 쓰지:

useEffect(() => {
  // 실행할 작업
}, [photos]);

여기서 [photos]는 단순한 배열이 아니야.
이 useEffect가 다시 실행되어야 하는 “조건”을 명시하는 배열이야.
즉, 이 배열 안에 있는 값이 바뀌면 → useEffect 다시 실행됨.

그래서 "의존성 배열(dependency array)"이란 이름을 붙인 거야.

💬 쉽게 말하면?

“이 useEffect는 photos라는 값에 의존하고 있어요.
photos가 바뀌기 전까진 다시 실행하지 마세요!”

이렇게 리액트에게 의존 관계를 명시해주는 것이야.
그래서 이 배열은 단순한 배열이 아니라 "useEffect의 실행 조건을 결정짓는 요소들의 리스트", 즉 의존성 배열인 거지.

🎯 실무에서의 중요성

의존성 배열을 제대로 설정하지 않으면 효과가 실행되지 않거나, 반대로 불필요하게 너무 자주 실행됨.

리액트는 최적화를 위해 꼭 필요한 경우에만 효과를 재실행하려고 하기 때문에, 의존성의 선언이 필수야.

💡 한 줄 요약

“의존성 배열”은 useEffect가 어떤 값의 변경에 의존해서 실행될지를 정해주는 의존 관계 명시 리스트다!