🔍 라이프사이클

김수진·2025년 7월 8일

React 강의

한 입 크기로 잘라 먹는 리액트 섹션 8- 라이프사이클

라이프사이클이란?

리액트 컴포넌트의 라이프 사이클이란?
Mount -> Update -> UnMount
로 구분된다.

Mount

컴포넌트가 탄생하는 순간
화면에 처음 렌더링 되는 순간

Undate

컴포넌트가 다시 렌더링 되는 순간
리렌더링 될 때를 의미

UnMount

컴포넌트가 화면에서 사라지는 순간
렌더링에서 제외 되는 순간을 의미

라이프사이클 제어

컴포넌트 라이프사이클 마다 컴포넌트가 각각 다른 작업을 수행하도록 만드는 것

Mount

서버에서 데이터를 불러오는 작업

Undate

어떤 값이 변경되었는지 콘솔에 출력

UnMount

컴포넌트가 사용하던 메모리 정리

useEffect 사용하기

useEffect란? 리액트컴포넌트의 사이드 이펙트(파생되는 효과)를 제어하는 새로운 React Hook이다.

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

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

  useEffect(() => {
    //count스테이트 값이 바뀔 때마다 첫번째 인수인 콜백함수를 실행
    console.log(`count: ${count}`);
  }, [count]);

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

  return (
    <div className="App">
      <h1>Simple Counter</h1>
      <section>
        <Viewer count={count} />
      </section>
      <section>
        <Controller onClickButton={onClickButton} />
      </section>
    </div>
  );
}

export default App;

useEffect로 라이프사이클 제어하기

1. mount

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

2. update

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

function App() {
  const [count, setCount] = useState(0);
  const isMount = useRef(false);

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

  //2. 업데이트 : 변화, 리렌더링
  useEffect(() => {
    if (!isMount.current) {
      isMount.current = true;
      return;
    }
    console.log("update");
  });
  //3. 언마운 : 죽음
  useEffect(() => {
    console.log("update");
  });
  const onClickButton = (value) => {
    setCount(count + value); //Controller의 명령을 받아와 현재 값과 선택된 값을 계산하는 코드!
  };

  return (
    <div className="App">
      <h1>Simple Counter</h1>
      <section>
        <Viewer count={count} />
      </section>
      <section>
        <Controller onClickButton={onClickButton} />
      </section>
    </div>
  );
}

export default App;

진짜 컴포넌트의 업데이트 단계에서만 코드를 실행시키고 싶다면, useRef를 사용한다.

3. unmount

Even.jsx

import { useEffect } from "react";

const Even = () => {
  useEffect(() => {
    //클린업, 정리함수
    return () => {
      console.log("unmount");
    };
  }, []);
  return <div>짝수</div>;
};

export default Even;

App.jsx

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

function App() {
  const [count, setCount] = useState(0);
  const isMount = useRef(false);

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

  //2. 업데이트 : 변화, 리렌더링
  useEffect(() => {
    if (!isMount.current) {
      isMount.current = true;
      return;
    }
    console.log("update");
  });

  //3. 언마운 : 죽음

  useEffect(() => {
    console.log("update");
  });
  const onClickButton = (value) => {
    setCount(count + value); //Controller의 명령을 받아와 현재 값과 선택된 값을 계산하는 코드!
  };

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

export default App;