useEffect

Eugenius1st·2023년 5월 21일
0

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개의 댓글