useEffect 변화의 감지

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

function App() {
  const [number, setNumber] = useState(0)

  const onclicked = () => {
    setNumber(number + 1)
  }

  useEffect(()=>{
    console.log('값이 바뀜')
  }, [number])


  return (
  <>
  <h1>{number}</h1>
  <button onClick={onclicked}>+1</button>
  </>
  )
}

export default App;

 

위와 같이 작성했을때(카운터 예제에 useEffect만 추가함)

useEffect는 변화를 캐치하는 놈이며

첫번째 파라미터 자리에는 실행하고싶은 함수를 넣어주면 되고 두번째 파라미터에는

빈 배열을 넣어준다(이놈은 deps 임). 기본적으로 빈 배열일 경우 첫번째 파라미터자리에 있는 함수를

최초 1회 실행해 주게 되며 deps에 특정 감시 대상을 넣어주면 그 감시대상의 state가 바뀔때마다

콜백함수를 실행해 준다.

해서 위의 코드를 실행하고 버튼을 클릭하면 number의 값이 즉 state가 바뀌게 되는데

그 변화를 useEffect가 캐치하여 콘솔에 값이 바뀜 이라는 메세지를 출력해주게 된다.