useEffect

Eugenius1st·2023년 5월 21일

React Hooks

목록 보기
28/29

useEffect는 2개의 인자를 받는데 첫번째는 function으로써의 effect 이다. 두번째 인자는 dependency 리스트이다.

import { useEffect, useState } from "react";

const UseEffectExample = () => {
  const [number, setNumber] = useState(0);
  const sayHellow = () => {
    console.log("hello");
  };

  useEffect(sayHellow, [number]);
  //useEffect는 componentDidMount와 componentWillUpdate이다.


  return (
    <div>
      <div onClick={setNumber(number + 1)}></div>
      {/* useEffect 가 sayHello를 component가 nount 되었을 때 실행시켰다.
      그리고 number 상태가 바뀔 때 실행시켰다. */}
    </div>
  );
};

export default UseEffectExample;

//참고: useEffect로부터 function이 리턴된다. 그것이 componentWillUnmoun이다.
//useEffect는 ComponentDidMount, ComponentWillUnMount, ComponentDidUpdate이다.

useEffect로부터 function이 리턴된다. 그것이 componentWillUnmoun이다.
지금은 이에 대한 설명이 없지만 다음 hooks 블로그에서 다룰 내용이다.

useEffectComponentDidMount, ComponentWillUnMount, ComponentDidUpdate이다.

profile
자신만의 속도로

0개의 댓글