[React] 리액트의 생애주기 (Mount, Update, Unmount)

리액트의 생애주기

인간마냥 리액트도 생애주기가 있다.

아기 리액트, 어른 리액트, 노인(!) 리액트...는 아니다.

이런 나이에 따른 생애 주기는 아니지만 탄생과 성장, 소멸이라는 부분은 비슷하다.

화면에 나타나는 리액트의 탄생을 Mount

무언가 업데이트 되거나 변화해 리렌더되는 성장(업데이트)을 Update

화면에서 사라지는 소멸을 Unmount 라고 표현한다.

 

이 3가지 생애주기마다 사용할 수 있는 메서드가 있으나 오로지 클래스형 컴포넌트에서만 사용할 수 있었다.

그러나 지금은 react Hooks가 나타나 함수형 컴포넌트도 useEffect를 사용하면 리액트의 생애주기를 나타낼 수 있게 되었다.

 

react Hooks는 use 키워드를 붙인 약간의 함수와 같은 형태인데 원래 클래스형 컴포넌트에 있던 기능들을 Hook, 낚아가지고 와서 사용한다고 해서 이런 이름이 붙여졌다고 한다. useState, useEffect, useRef 같은 것들이 그렇다.

 

이런 Hooks는 리액트에 있는 기능이라 import {} from "react";를 반드시 해줘야 한다.

---

useEffect

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

useEffect는 2개의 파라미터를 갖는다.

하나는 콜백 함수고, 다른 하나는 의존성 배열이다.

의존성 배열은 이 배열 안에 있는 값이 변화하면 콜백 함수가 수행된다.

 

Mount

App.js에 <LifeCycle /> 컴포넌트를 적은 후 컴포넌트를 작성했다.

import React, { useState, useEffect } from "react";

const LifeCycle = () => {
  const [count, setCount] = useState(0);
  const [text, setText] = useState("");

  // Mount
  useEffect(() => {
    console.log("Mount!");
  }, []);

  return (
    <div style={{ paddin: 20 }}>
      <div>
        {count}
        <button onClick={() => setCount(count + 1)}>+</button>
      </div>
      <div>
        <input value={text} onChange={(e) => setText(e.target.value)} />
      </div>
    </div>
  );
};

export default LifeCycle;

 

화면에는 현재 이렇게 count와 버튼, Input이 보인다.

LifeCycle 컴포넌트가 생성(Mount)되면 콘솔에 Mount!가 찍히게 해뒀다.

 

새로고침을 하면 (화면에 컴포넌트가 나타나면) Mount가 계속 뜬다. 

 

Update

위 UI에서는 +버튼을 누르면 count가 증가하고, input에 값을 입력할 수 있다.

click, change 같은 이벤트로 상태 함수의 초기값(count나 text)가 변화하면서 업데이트가 이뤄진다.

이렇게 업데이트가 이뤄질 때마다 똑같이 콘솔에 Update라는 값을 찍어보았다.

 

// Update
  useEffect(() => {
    console.log("Update!");
  });

useEffect에서 의존성 배열을 작성하지 않으면 어떤 것이든 변경될 때마다 Update!가 찍힌다.

 

  useEffect(() => {
    console.log(`count is update : ${count}`);
    if (count > 5) {
      alert("count가 5를 넘어 1로 초기화합니다.");
      setCount(1);
    }
  }, [count]);

  useEffect(() => {
    console.log(`text is update : ${text}`);
  }, [text]);

이런 식으로 의존성 배열 안에 업데이트를 원하는 값을 넣어 그 값이 변화할 때마다 콘솔에 찍을 수도 있다.

 

Unmount

컴포넌트가 화면에서 사라질 때 Unmount를 콘솔에 찍어보았다.

import React, { useState, useEffect } from "react";

const UnmountTest = () => {
  useEffect(() => {
    console.log("Mount!");

    return () => {
      console.log("Unmount");
    };
  }, []);

  return <div>Unmount testing component</div>;
};

const LifeCycle = () => {
  const [isVisible, setIsVisible] = useState(false);
  const toggle = () => setIsVisible(!isVisible);

  return (
    <div style={{ paddin: 20 }}>
      <button onClick={toggle}>on/off</button>
      {isVisible && <UnmountTest />}
    </div>
  );
};

export default LifeCycle;

 

먼저 화면에는 on/off 버튼 하나가 생성된다.

이 버튼을 누르면 toggle이 작동되는데 이 toggle은 코드의 isVisible을 반대로 뒤집어준다.

버튼 밑에는 isVisible이 true일 때만 UnmountTest 컴포넌트가 그려지도록 단락 회로 평가를 사용한다.

 

Unmount는 기존 useEffect를 작성하되 콜백 함수 안에 또 리턴될 하나의 함수를 적어주면 된다.

이 하나의 함수는 Unmount 되는 시점에 실행이 된다.

 

즉 on/off 버튼을 눌러 단락 회로 평가에 따라 UnmountTest 컴포넌트를 생성했다가 소멸시키는 것이다.

UnmountTest 컴포넌트는 생성될 때 Mount, 소멸될 때 Unmount를 콘솔에 찍게 된다.

 

뭔가 추상적으로만 이해했던 개념인데 직접 컴포넌트에 그려 보니 훨씬 이해가 잘 된다.

 

**참고

한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 - 인프런 | 강의