React 라이프 사이클 (feat. useEffect 함수 사용 방법)

Mount (탄생) :

컴포넌트가 탄생하는 순간을 말하며 즉, 화면에 처음 렌더링 되는 순간입니다.

ex) "A 컴포넌트가 Mount 되었다." => A 컴포넌트가 화면에 처음으로 렌더링 되었다.

Update (변화) : 

컴포넌트가 다시 렌더링 되는 순간을 말하며 즉, 마운트 이후에 리렌더링 되는 그 순간을 의미

ex) "A 컴포넌트가 업데이트 되었다." => "A 컴포넌트가 리렌더링 되었다."

Unmount (죽음) :

컴포넌트가 화면에서 사라지는 순간을 말하며 즉, 렌더링에서 제외되는(사라지는) 순간을 의미

ex) "A 컴포넌트가 언마운트 되었다." => A 컴포넌트가 화면에서 사라졌다.

 

 

---

useEffect 

리액트 컴포넌트의 사이드 이펙트를 제어하는 새로운 React Hook

사이드 이펙트란 ? "부작용"으로, 리액트에서는 "부수적인 효과, 파생되는 효과" 정도로 해석이 가능

 

useEffect를 이용하면 이러한 Side Effect를 제어할 수 있음

---

useEffect는 React의 함수형 컴포넌트에서 사이드 이펙트(Side Effects)를 처리하기 위해 사용하는 Hook

기본 사용법

useEffect(() => {
  // 수행할 작업
  return () => {
    // 정리(clean-up) 작업 (옵션)
  };
}, [의존성 배열]);

 

• 첫 번째 인자는 실행할 함수입니다. 이 함수는 컴포넌트가 렌더링된 이후에 실행됩니다.
• 두 번째 인자는 의존성 배열로, 배열에 포함된 값이 변경될 때마다 useEffect가 다시 실행됩니다.

의존성 배열

빈 배열([]): 컴포넌트가 처음 렌더링될 때 한 번만 실행됩니다. 이후 상태가 변경되어도 다시 실행되지 않습니다.

주로 초기화 작업(예: API 호출 등)에 사용됩니다.

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

 

 

의존성 배열 생략: useEffect가 컴포넌트가 렌더링될 때마다 실행됩니다. 상태나 props가 변경될 때마다 매번 실행되므로, 매번 새로운 값을 필요로 할 때 적합합니다.

useEffect(() => {
  console.log("매 렌더링마다 실행됩니다.");
});

 

특정 값이 들어있는 배열: 배열에 포함된 특정 상태나 props가 변경될 때만 실행됩니다. 필요한 상태 값만 의존성 배열에 추가해 성능을 최적화할 수 있습니다.

useEffect(() => {
  console.log("count 상태가 변경될 때 실행됩니다.");
}, [count]);

 

정리 함수(Cleanup Function)

useEffect 내에서 반환된 함수는 컴포넌트가 언마운트될 때나 의존성 배열의 값이 변경되기 직전에 실행됩니다.

주로 타이머, 이벤트 리스너 등을 제거할 때 사용합니다.

useEffect(() => {
  const timer = setInterval(() => {
    console.log("타이머 작동 중...");
  }, 1000);

  return () => {
    clearInterval(timer); // 타이머 정리
    console.log("타이머가 정리되었습니다.");
  };
}, []);

기본 원리

React는 렌더링 후에 useEffect를 실행하며, 렌더링과 사이드 이펙트를 분리하여 처리합니다.

이렇게 하면 렌더링 로직이 복잡해지지 않고, 사이드 이펙트가 의도한 시점에 실행되어 컴포넌트의 상태 변화와 상호작용이 원활해집니다. 또한 정리 함수 덕분에 메모리 누수 등을 방지할 수 있습니다.