[React] 18. useEffect로 라이프 사이클 제어

서회정

Mar 03, 2026

Contents

1. 라이프 사이클 제어 방법 1. 마운트 : 탄생 2. 업데이트 : 변화 / 리렌더링 3. 언마운트 : 소멸

1. 라이프 사이클 제어 방법

useEffect를 활용하여 라이프 사이클 제어 방법을 알아보자.

라이프 사이클은 마운트, 업데이트, 언마운트 세 가지 단계를 가진다.

각각의 사이클에 따른 제어 방법을 살펴보자.

1. 마운트 : 탄생

먼저 마운트 단계를 제어 하는 방법을 알아보자.

마운트 단계를 제어한다는 것은 프로그램이 최초에 실행 될 때를 제어하는 것이다.

useEffect는 deps에 있는 값이 변경되어야만 실행된다.

그래서 프로그램이 실행되었을 때 처음에 한 번만

실행하고자 하는 코드는 useEffect를 사용하여 빈 배열을 넣고

콜백 함수 내부에 실행하고자 하는 코드를 작성하면 된다.


useEffect(() => {
    console.log("마운트");
  }, []);

콘솔에 출력하는 동작이 최초에 화면이 렌더링 될 때만 실행되는 것을 확인할 수 있다.

2. 업데이트 : 변화 / 리렌더링

다음으로는 업데이트를 제어하는 방법이다.

업데이트는 변화로 인해 화면이 리렌더링되는 단계를 말한다.

따라서 화면이 렌더링 될 때를 모두 제어하는 것을 의미한다.

특정한 deps에 변경이 일어날 때가 아닌

리렌더링이 일어날 때마다 제어를 해야하는 경우라면

deps 자리를 아예 비워두어야한다.

마운트 제어와 다르게 빈 배열이 아닌, useEffect에 두 번째 인자로 들어갈 배열 자리를 아예 생락해보자.


useEffect(() => {
    console.log("리렌더링");
  });

최초에 화면이 렌더링 될 때, 그리고 리랜더링이 일어날 때

모두 해당하는 콜백 함수 내의 코드가 실행되는 것을 확인할 수 있다.

✅ 업데이트되는 시점만 제어하고자 한다면?

💡

마운트 시점을 제외하고 업데이트가 되는 순간에만 콜백 함수를 실행하고자 한다면 현재 이 앱 컴포넌트가 마운트 되었는지 그렇지 않은지 체크하는 변수를 useRef를 활용하여 만들어주면 된다.

먼저, useRef를 import한 뒤에 useRef로 isMount라는 새로운 래퍼런스 객체를 생성해준다.

그리고 초기값으로 current에 fasle값을 넣어준다.

그럼 현재까지 isMount.current값은 false가 된다.

그런 다음 아까 작성해 두었던 업데이트 제어 콜백함수 상단에 조건문을 작성해준다.

isMount.current 값이 false일 때 이 값을 true로 만들어주고 return으로 해당 콜백 함수를 강제로 종료해준다.


  useEffect(() => {
    if (!isMounted.current) {
      isMounted.current = true;
      return;
    }
    console.log("리렌더링");
  });

그럼 해당 컴포넌트가 처음 렌더링 될 때 해당하는 조건문이 실행되며 조건문 다음 코드인 콘솔 출력은 되지 않은 채로 isMount.current의 값만 true로 바뀌어 저장된다.

래퍼런스 객체는 화면이 리렌더링 되어도 초기화가 되지 않는 특성이 있다.

리렌더링이 발생 했을 때도 current의 값이 유지되어 최로 렌더링 이후로는 리렌더링 될 때마다 콘솔 출력 코드가 잘 실행된다.

이렇게 우리가 의도한 대로 리렌더링 될 때에만 콜백 함수가 실행되는 로직이 만들어진다.

3. 언마운트 : 소멸

마지막으로 화면에서 소멸하는 요소가 있을 때

이 시점을 제어하는 방법에 대해서도 알아보자.

우선, 현재 예제에는 소멸하는 요소가 없기 때문에

카운트 숫자가 짝수 일때만 화면에 나타나고,

홀수일 때는 사라질 수 있는 요소를 만들어보자.

Even이라는 컴포넌트를 만들고 다음과 같이 작성해주자.


const Even = () => {
  return <div>짝수입니다.</div>;
};

export default Even;

그리고 Viewer 컴퍼넌트 바로 아래에 삼항연산자로

count가 2로 나누어 떨어질 때만 Even 컴퍼넌트가 렌더링 되도록 하자.


import "./App.css";
import Controller from "./components/Controller";
import Viewer from "./components/Viewer";
import Even from "./components/Even";
import { useState, useEffect, useRef } from "react";

function App() {
  const [count, setCount] = useState(0);
  const [input, setInput] = useState("");

  const isMounted = useRef(false);

  // 1. 마운트 : 탄생
  useEffect(() => {
    console.log("마운트");
  }, []);

  // 2. 업데이트 : 변화, 리렌더링
  // 이 컴퍼넌트가 리렌더링 될 때마다 실행됨!
  useEffect(() => {
    if (!isMounted.current) {
      isMounted.current = true;
      return;
    }
    console.log("리렌더링");
  });

  // 3. 언마운트 : 죽음

  const onClickButton = (value) => {
    setCount(count + value);
  };

  return (
    <div className="App">
      <h1>Simple Counter</h1>
      <section>
        <input
          value={input}
          onChange={(e) => {
            setInput(e.target.value);
          }}
        ></input>
      </section>
      <section>
        <Viewer count={count} />
        {count % 2 === 0 ? <Even /> : null}
      </section>
      <section>
        <Controller onClickButton={onClickButton} />
      </section>
    </div>
  );
}

export default App;

다음으로 Even 컴퍼넌트에 가서 언마운트를 제어하는 useEffect를 사용해보자.

먼저 훅을 import하고 useEffect를 호출한다.

첫 번째 인수로는 마찬가지로 콜백함수, 두 번째 인자로는 빈 배열을 넣는다.

이 형태는 마운트를 제어할 때와 같다.

언마운트를 제어할 때는 작성해둔 첫 번째 인자인 콜백함수 내에 새로운 콜백함수를 반환하게 만들어야한다.

다음과 같은 형태이다.


useEffect(() => {
	return () => {};
}, []);

이렇게 useEffect의 콜백 함수가 반환하는 함수를 클린업 또는 정리함수라고 부른다.

이러한 정리함수는 useEffect가 종료될 때 실행된다.

deps를 빈 배열로 두면 useEffect는 마운트될 때 실행되기 때문에, 그것이 끝나는 시점에 클린업 함수가 실행된다.

그래서 언마운트 제어를 할 때는 실행하고자 하는 동작을 클린업 함수에 작성하면 된다.


import { useEffect } from "react";

const Even = () => {
  useEffect(() => {
    return () => {
      console.log("언마운트");
    };
  }, []);
  return <div>짝수입니다.</div>;
};

export default Even;

카운트의 숫자가 홀 수가 될 때, Even 컴퍼넌트가 사라지며

언마운트 시점에 출력되는 콘솔 메세지를 확인할 수 있다.