React | 함수형 컴포넌트 생명주기와 useEffect

함수형 컴포넌트

함수형 컴포넌트는 기존 클래스형 컴포넌트와 달리 React Hooks를 통해 생명주기를 관리함

함수형 컴포넌트는 생명주기 메서드 대신 useEffect, useState 등의 훅을 사용해 상태 관리 부수 효과 (side effect)를 처리함

 

---

마운트(Mount) 단계

컴포넌트가 처음 DOM에 삽입될 때 발생

이때 주로 초기 데이터를 설정하거나, 네트워크 요청 수행

 

useEffect (마운트 시 실행)

useEffect(() => {
  // 마운트될 때 한 번 실행되는 로직
  console.log("Component mounted");

  // 클린업 함수는 마운트가 해제될 때 실행
  return () => {
    console.log("Component unmounted");
  };
}, []); // 빈 배열을 두 번째 매개변수로 전달해 마운트/언마운트 시점에서만 실행

useEffect는 두 번째 인자로 빈 배열 []을 받으면 ,이 코드 블록은 컴포넌트가 마운트될 때 한 번만 실행 됨

또한 useEffect 안에서 리턴되는 함수는 컴포넌트가 언마운트될 때 실행됨

 

---

업데이트(Update) 단계

컴포넌트가 리렌더링될 때, 즉 상태나 props가 변경될 때 발생

 

useEffect (업데이트 시 실행)

const [count, setCount] = useState(0);

useEffect(() => {
  console.log("Component updated with count:", count);
}, [count]); // count가 변경될 때마다 useEffect 실행

useEffect의 두번째 매개변수로 상태나 props를 배열에 전달하면, 해당 값이 변경될 때마다 useEffect가 실행

이를 통해 특정 상태가 업데이트될 때 필요한 작업을 수행할 수 있음

 

---

언마운트(Unmount) 단계

컴포넌트가 DOM에서 제거될 때 발생하며, 타이머 해제, 네트워크 요청 취소 등 정리(clean up)작업을 수행할 수 있음

 

useEffect (언마운트 시 실행)

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

  return () => {
    clearInterval(timer); // 컴포넌트가 언마운트될 때 타이머 정리
  };
}, []);

useEffect의 리턴 값으로 함수를 전달하면, 이 함수는 컴포넌트가 언마운트될 때 실행됨

이를 통해 정리 작업을 수행하여 메모리 누수를 방지할 수 있다

 

---

의존성 배열

useEffect의 의존성 배열은 useEffect가 언제 실행될지 결정하는 중요한 역할을 하는 배열로,

의존성 배열에 특정 상태나 props를 넣으면, 이 값들이 변경될 때마다 useEffect의 콜백 함수가 실행된다

 

의존성 배열 사용 방식

useEffect(() => {
  // 실행될 코드
}, [dependency1, dependency2]);

여기서 dependency1와 dependency2가 의존성 배열에 들어있는 의존성(dependency)이다

의존성 배열에 들어간 값들이 변경될 때마다 useEffect가 다시 실행된다

 

의존성 배열 사용 예시

의존성 배열 없이 사용

useEffect(() => {
  console.log("항상 실행됩니다");
});

• 의존성 배열을 전달하지 않으면 컴포넌트가 렌더링될 때마다 useEffect가 실행됨
• 상태나 props가 변경될 때마다 계속 실행되므로, 필요한 경우가 아니라면 성능에 영향을 줄 수 있음

 

빈 배열([ ]) 을 의존성 배열로 사용

useEffect(() => {
  console.log("마운트 시 한 번만 실행됩니다");
}, []);

• 의존성 배열을 빈 배열로 설정하면 컴포넌트가 마운트될 때 단 한 번만 실행됨
• 주로 초기 데이터 로드나 컴포넌트가 처음 생성될 때 한 번만 실행되어야 하는 작업에 사용

 

특정 상태나 props를 의존성 배열에 추가

useEffect(() => {
  console.log(`count가 변경될 때마다 실행됩니다: ${count}`);
}, [count]);

• 의존성 배열에 count를 넣으면 count가 변경될 때마다 useEffect가 실행됨
• 주로 특정 상태나 props가 변경될 때마다 해당 값에 기반하여 다시 실행되어야 하는 작업에 사용

 

의존성 배열이 필요한 이유

의존성 배열이 없으면 useEffect는 기본적으로 매던 렌더링될 때 실행됨

하지만 모든 상태나 props의 변경마다 useEffect를 실행할 필요는 없음

의존성 배열을 통해 특정 값이 변경될 때만 useEffect를 실행하도록 제어할 수 있어 성능을 최적화 할 수 있음

 

• 만약 의존성 배열에 포함된 상태나 props가 변경되지 않으면, useEffect는 실행되지 않음
• 필요한 의존성만 추가해 불필요한 실행을 줄이고, 특정 작업을 효율적으로 처리할 수 있음

 

정리

의존성 배열 설정	실행 시점	용도
없음	매번 렌더링될 때마다	모든 렌더링 시점에 부수 효과가 필요할 때
[] 빈 배열	마운트될 때 한 번만 실행	초기화 작업, 컴포넌트가 처음 렌더링 될 때
[dep1, dep2]	dep1, dep2가 변경될 때마다 실행	특정 상태나 props가 변경될 때마다 실행

 

useEffect의 의존성 배열은 언제 부수 효과를 다시 실행할지를 결정하는 중요한 도구로, 컴포넌트의 동작을 세밀하게 제어할 수 있게 해줌

 

---

생명주기 훅 요약

생명주기 단계	훅(Hook)	설명
마운트	useEffect(() => {...}, [])	컴포넌트가 처음 생성될 때 한 번만 실행됨
업데이트	useEffect(() => {...}, [deps])	지정된 deps가 변경될 때마다 실행됨
언마운트	useEffect(() => {return() => {...}}, [])	컴포넌트가 제거될 때 실행됨 (클린업 함수로 리턴)

 

함수가 컴포넌트는 이와 같이 useEffect를 통해 동작하는데, 클래스형 컴포넌트와 달리 useEffect는 생명주기 메서드를 여러 용도로 조합하여 사용할 수 있어 코드가 더욱 간결해짐