React - useEffect

React 하면서 가장 중요하다고도 할수있는 LifeCycle useEffect 에 대해 공부한대로 한번 글을 써볼 예정 입니다.

 

React Component의 LifeCycle (생명 주기) 라고 하는것은  Mount ( 탄생 ) --> Update ( 변화 ) --> UnMount ( 죽음 )  이라고 하는데요.

 

Mount는 즉 Component가 생성 되었을때 최초 한번 실행이 되는것이며

Update는 Component가 리랜더링 될때마다 실행이 되는것이며

UnMount는 Component가 없어지거나 사라질때 실행이 되는것입니다.

 

각각 상황에 따라 useEffect를 사용할수있는데 보통 Mount 즉 Component 가 Mount가 될때 초기화를 보통 시킵니다.

useEffect(() => {
  // todo...
}, []);

useEffect 의 기본적인 코드부터 보겠습니다.

 

안에 보시면 //todo.. 라고 되어 있는곳이 callback 함수 이고 [] 빈 배열이 있는 부분이 Dependency Array (의존성 배열) 입니다.

 

저 배열 내에 들어있는 값이 변화하면 콜백 함수가 실행됩니다.

 

import React from "react";
import LifeCycle from "./Components/LifeCycle";

const App = () => {
  <LifeCycle />
}

export default App;

import React, {useEffect} from "react";

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

  return (<div></div>)
}

export default LifeCycle;

이제 본격적으로 코드를 적어볼것인데 Mount부터 해보겠습니다.

 

일단 LifeCycle Component를 만들어 App Component에 올려둡니다.

기본적으로 useEffect 를 불러온뒤 다음과 같이 코드를 짜게 되면 Component가 처음 생성될때 한번만 실행을 하게 됩니다. 보통 초기화를 할때 많이 사용합니다.

 

 useEffect Mount 

import { useEffect, useState } from "react";

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

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

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

  return (
    <div className="LifeCycle">
      {count}
      <button onClick={() => { setCount(count + 1); }}>
        add count
      </button>
    </div>
  );
}

export default LifeCycle;

LifeCycle Update를 해보겠습니다.

 

Mount 확인을 할때는 useEffect 뒤에 Dependency, 빈배열을 붙였지만 만약에 붙이지 않는다면 컴포넌트가 리랜더링 될때마다 update 부분 의 함수가 호출이 되게 됩니다.

 

useEffect Update

 

import { useEffect, useState } from "react";

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

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

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

  return (
    <div className="LifeCycle">
      {count}
      <button onClick={() => { setCount(count + 1); }}>
        add count
      </button>
    </div>
  );
}

export default LifeCycle;

간단한 count 프로그램을 만들어 테스트를 해보겠습니다. 

 

count 변수를 만든뒤 버튼을 클릭하면 setCount를 통해서 count 값이 올라가는 프로그램 입니다.

클릭할때마다 console log에서 Update가 찍혀나오는걸 볼수있습니다.

 

state의 값이 바뀌기 때문에 component가 리랜더링이 되게 되고 Dependency 없는 useEffect의 콜백 함수가 실행되게 됩니다.

 

import { useEffect, useState } from "react";

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

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

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

  useEffect(() => {
    console.log(`count up ${count}`);
  }, [count]);

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

  return (
    <div className="LifeCycle">
      <div>
        {count}
        <button onClick={() => { setCount(count + 1); }}>
          add count
        </button>
      </div>
      <div>
        {text}
        <input value={text} onChange={(e) => setText(e.target.value)} />
      </div>
    </div>
  );
}

export default LifeCycle;

이제 빈 배열에 state를 넣어 해당 state가 값이 변할때만 실행하는 useEffect를 만들어 보겠습니다.

 

count 버튼을 클릭하여 onClick 이벤트가 발생하여 setCount(count + 1) 함수가 실행이 되어 count state가 바뀌고

콜백함수가 실행되게 됩니다.

 

 

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

const UnMountTest = () => {

  useEffect(() => {
    console.log('Mount');

    return() => {
      console.log('UnMount');
    }
  }, []);

  return (
    <span> UnMount Test </span>
  )
}

const LifeCycle = () => {
  const [isToggle, setIsToggle] = useState(false);
  const handleToggle = () => {
    setIsToggle(!isToggle);
  }

  return (
    <div>
      <button onClick={handleToggle}>Toggle</button>
      { isToggle && <UnMountTest/> } 
    </div>
  )
}

export default LifeCycle;

이제 마지막으로 UnMount에 대해서 알아볼겁니다.

Mount 는 Component가 생성 될때 처음 실행이 된다면 UnMount는 Component가 없어지거나 사라질때 실행이

됩니다.

 

다음 코드는 생소한 코드를 보셧을수도 있겠습니다. isToggle && <UnMountTest /> 인데 해당 코드는 단락회로 평가 라는것입니다.

 

 useEffect Delete 

이제 버튼을 클릭하면 unmount 텍스트가 생기고 사라지는데 console 에서 Component가 생성될때 Mount, 없어질때 UnMount가 console 창에 찍히는걸 볼수있습니다.

 

지금까지 uesEffect 의 Mount Update UnMount 에 대해 혼자 공부하는겸 포스팅 해보았습니다.

 

감사합니당.