라이프사이클과 함께보면 이해하기 쉽다(클릭)

사용법

useEffect(() => {
// 콜백함수
}, []); // []은 의존성배열로 이 배열내에 들어가있는 값이 변화하면 콜백함수가 실행된다.

mount, update

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

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

// 빈배열을 주면 처음 렌더링시 한번 작동한다.
  useEffect(() => {
    console.log("mount");
  }, []); 

// 현재 컴포넌트 상의 리렌더(값이 바뀌면) 작동한다
  useEffect(() => {
    console.log("update");
  });

// 배열의 특정 변수를 입력하면 해당 변수의 값이 변할때마다 작동한다.
  useEffect(() => {
    console.log("update count");
    if (count > 5) {
      console.log("count > 5");
    }
  }, [count]);

// 배열의 특정 변수를 입력하면 해당 변수의 값이 변할때마다 작동한다.
  useEffect(() => {
    console.log("update text");
  }, [text]);

  const [isVisble, setIsVisble] = useState(false);
  const toggle = () => setIsVisble(!isVisble);

  return (
    <div style={{ padding: 20 }}>
      <div>
        {count}
        <button onClick={() => setCount(count + 1)}>+</button>
      </div>

      <div>
        <input value={text} onChange={(e) => setText(e.target.value)} />
        <br />
      </div>
    </div>
  );
};

export default Lifecycle;

unMount

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

const ***UnMountTest*** = () => { // 테스트하기 위한 컴포넌트 생성

**// return 을 해주면 unMount 상태가 된다.**
  useEffect(() => {
    ***console.log("mount! Test");*** 

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

  return "unmount test"; // 리턴값 
};

const Lifecycle = () => {
 
  const [isVisble, setIsVisble] = useState(false);
  const toggle = () => setIsVisble(!isVisble);

  return (
    <div style={{ padding: 20 }}>
      <button onClick={toggle}> ON / OFF </button> // 누르면 값이 변환.
      ***{isVisble && <UnMountTest />} // 값이 변하면서 true && true 되며 위 useEffect 작동***
    </div>
  );
};

export default Lifecycle;