React - useEffect

 

useEffect : ComponentDidMount / ComponentDidUpdate / ComponentWillUnMount 의 역할을 하는 React hook

 

 

사용법 : 

useEffect(function, deps);

첫번째 인자는 리액트가 componentDidmount / componentDidUpdate 됐을때 실행 할 함수

두번째 인자는 dependency 이고 만약 이 두번째 인자가 존재한다면, 인자로 들어온 리스트에 있는 값이 변할때만 function이 실행되도록 활성화 된다.

 

간단한 예제

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

const 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>
  );
};

export default App;

처음 페이지가 렌더링 된 후, 콘솔에는 Hello가 먼저 한번 뜰것이고,

그 이후에 number값을 올려주는 버튼을 누르면 sayHello 함수는 계속 실행될것이다.

aNumber 값을 올려주는 버튼을 누르면 function은 실행되지않는다!

 

추가로

여기서 deps 값에 빈 배열을 전달하면, 처음 렌더링할때만 sayHello가 실행되고, 이 후에 number , aNumber 값에 변화를 주어도 sayHello는 실행되지 않는다!