[react] useEffect

리액트를 처음 배우면서 useState는 어렵지 않게 이해 할 수 있었는데, useEffect는 공식문서를 봐도 정확히 이해가 가지 않았다.
그래서 정리해본다.useEffect는 한마디로 말하면 "랜더링이 될 때마다 실행 된다" 이다.

기본형

---

button 누르면 count의 값이 1씩 증가하는 코드이다.

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

function App() {
  const [count, setCount] = useState(0);

  useEffect(()=> {
    console.log(count);
  })

  const increment = () => {
    setCount(count+1);
  }

  return (
    <div className="App">
      <button onClick={increment}>button</button>
    </div>
  );
}
export default App;

랜더링이 된 후 useEffect가 실행 되므로 처음에 콘솔에 찍히는 값은 0이고, 그 후 버튼을 누를 때마다 1씩 증가하여 콘솔에 출력된다.
새로운 state를 추가해서 똑같이 클릭 할때마다 1씩 증가하게 만들어보자

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

function App() {
  const [count, setCount] = useState(0);
  const [test, setTest] = useState(0);

  useEffect(()=> {
    console.log(count);
  })

  const increment = () => {
    setCount(count+1);
  }

  return (
    <div className="App">
      <button onClick={increment}>count</button>
      <button onClick={()=>{setTest(test+1)}}>test</button>
    </div>
  );
}

export default App;

위 코드를 실행시켜 test 버튼을 누르면, 누를 때마다 랜더링이 되는 데, 그 때 콘솔에 count의 값인 0이 계속 찍히는 것을 볼 수 있다.

useEffect를 count가 변경 될 때만 실행시키기 : [state]

---

useEffect의 두번째 파라미터로 array를 넣어주고 변경 될 state를 적어주면 된다.

 useEffect(()=> {
    console.log(count);
  },[count])

이렇게 변경 시키면 test를 아무리 눌러도 콘솔에 count가 찍히지 않는다.(맨 처음 랜더링 시에만 콘솔에 출력)

count와 test가 둘 다 변경 될 때 마다 실행 시키고 싶으면, array안에 같이 넣어주면 된다.

 useEffect(()=> {
    console.log(count);
  },[count,test])

useEffect를 첫 랜더링 시에만 시키기 : []

두번째 인자로, 빈 array를 넣어주면 첫 랜더링 시에만 실행되고, 그 이후에는 실행 되지 않는다!

 useEffect(()=> {
    console.log(count);
  },[])