[React] useEffect

useEffect

useEffect Hook을 이용하여 우리는 React에게 컴포넌트가 렌더링 이후에 어떤 일을 수행해야하는 지를 말해줌

componentDidMount, componentDidUpdate, componentWillUnmount, getDerivedStateFromProps의 역할을 수행

 

useEffect 예시1

const App = () => {
  const sayHello = () => console.log("hello");
  useEffect(() => {
    sayHello();
  });
  const [number, setNumber] = useState(0);
  const [anotherNumber, setAnotherNumber] = useState(0);

  return (
    <div className="App">
      <div>Hello</div>
      <button onClick={() => setNumber(number + 1)}>{number}</button>
      <button onClick={() => setAnotherNumber(anotherNumber + 1)}>
        {anotherNumber}
      </button>
    </div>
  );
};

위와 같이 작성하면 페이지 로딩 시, 새로고침, 숫자 버튼 클릭 시 모두 console에 hello가 출력됨

 

 

---

useEffect 예시2

const App = () => {
  const sayHello = () => console.log("hello");
  const [number, setNumber] = useState(0);
  const [anotherNumber, setAnotherNumber] = useState(0);
  useEffect(sayHello, [number]);

  return (
    <div className="App">
      <div>Hello</div>
      <button onClick={() => setNumber(number + 1)}>{number}</button>
      <button onClick={() => setAnotherNumber(anotherNumber + 1)}>
        {anotherNumber}
      </button>
    </div>
  );
};

위와 같이 작성 하면 첫번째 숫자 버튼 클릭시에만 콘솔창에 hello가 찍힘(number가 바뀔때만 실행됨)

 

---

여기서 useEffect 부분만 자세하게 살펴보자

useEffect(sayHello, [number]);

sayHello 부분은 componentDidMount라고 볼 수 있고, [number]는 componentDidUpdate라고 볼 수 있음

 

그렇다면 아래와 같이 작성하면 어떻게 될까? 

useEffect(sayHello, []);

초기 로딩시에만 한 번 콘솔창에 hello가 실행될 것임