[React] React Hook-2.0 useEffect

useEffect

function useEffect(effect: EffectCallback, deps?: DependencyList): void
- 2개의 인자를 받는다. 첫 번째는 function으로써의 effect이고 두 번째는 list로써 dependency이다. 

- deps가 있다면 effect는 deps list에 있는 값일 때만 값이 변하도록 활성화 된다.

 

- useEffect는 componentWillUnmount, componentDidMount, componentWillUpdate의 역할을 하는 funciton이다.
- dependency에 넣은 list의 상태가 변경되면 effect로 넣은 함수가 실행된다
- useEffect로부터 componentWillUnmount가 반환된다.

 

< App() >

import React, { useEffect, useState } from "react";
import ReactDOM from "react-dom";
import "./styles.css";

export default function App() {
  const sayHello = () => console.log("hello");
  const [number, setNumber] = useState(0);
  const [aNumber, setANumber] = useState(0);
  useEffect(sayHello, [number]);
  return (
    <div className="App">
      <div>Hi</div>
      <button onClick={() => setNumber(number + 1)}>{number}</button>
      <button onClick={() => setANumber(aNumber + 1)}>{aNumber}</button>
    </div>
  );
}

- 위 예시에서 useEffect는 componentDidMount와 componentWillUpdate이다.
 sayHello를 component가 mount되었을 때 실행시키고 [number] list가 변경될 때만 실행한다.
- 만약 component가 mount 되었을 때 실행시킨 뒤 어떠한 경우에도 다시 실행시키고 싶지 않다면 빈 dependency를 전달하면 된다.

 

 

< 처음 mount 될 때 >

- 처음 mount 될 때 effect 함수가 실행되어 hello가 console 창에 찍힌다.

 

< 왼쪽 버튼 click >

 - sayHello 함수가 작동하여 hello가 console 창에 찍힌다.

 

 

< 오른쪽 버튼 click >

 - sayHello 함수가 작동하지 않아 hello가 console 창에 찍히지 않고 그대로 2를 유지한다.