[Hooks] 5. Introduction to useEffect

useState의 첫 번째는 state를 초기화 시켜주고

두 번째는 첫 번째 아이템인 currentIndex는 index가 될거고,

setCurrentIndex는 value를 바꿔줄거다.

 

다시 말하자면 useState의 value를 초기화해주고 현재 value와 value를 변경해주는 것.

---

이제 useEffect를 알아보자.

componentWillUnmount와 componentDidMount, compoentWillUpdate와 비슷하다.

 

component가 mount 되자마자 우리는 function을 실행시킬건데 

 

component가 mount 되는 즉시 hello를 볼 수 있다.

number와 aNumber를 클릭하면 componentDidUpdate의 역할도 하기 때문에

콘솔창에 sayhello가 찍한다.

 

---

useEffect는 두 개의 인자를 받는데 첫 번째는 function으로써의 effect다.

두 번째는 deps인데, 만약 deps가 있다면 effect는 deps 리스트에 있는 값일 때만

값이 변하도록 활성화 될거다.

 

 

만약 여기에 어떤 값이 존재하다면 그 값은 변할거고,

그리고 나서 useEffect는 활성화 될거다.

---

number가 변할때만 sayhello가 작동하도록 해보자.

 

aNumber를 누르면 hello가 실행이 안된다.

 

useEffect가 sayHello를 component가 mount 되었을 때 실행시켰고

number가 바뀔때만 실행된다.

 

useEffect는 componentDidMount와 compoentWillUpdate인데

number 일때만 업데이트를 한다.

 

component가 Mount되었을 때만 실행시키고 싶다면 아래와 같이 

빈 dependency를 전달해 주기만 하면 된다.

저 부분에 어떤걸 넣고 그게 바뀐다면 hello는 다시 실행될거다.

---

number가 바뀔때만 componentWillUpdate를 가질거다.

useEffect로 부터 function이 리턴되는데, componentWillUnmount일거다.

---

<코드기록>

import React, {useState, useEffect} from "react";
import ReactDOM from "react-dom";


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

const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  rootElement
);

---

 

 

 

 

 

 

 

 

 

 

 

※ 본 포스팅은 개인 공부 기록을 목적으로 남긴 글이며 본 사실과 다른 부분이 있다면 과감하게 지적 부탁드립니다.