REACT useEffect를 알아보자

useEffect

• useEffect를 이용해서 앱에 여러가지 효과를 줄 수 있다.

• 비동기적으로 작동한다.

  • 비동기적 작동이란?
    요청을 보낸 후 응답에 관계없이 다음 동작을 실행하는 것을 비동기라고 한다
    (쉽게 이야기 하면 제일 나중에 작동한다는 뜻)

사용방법

• useEffect( effect )
  랜더링 될 때마다 effect를 실행한다.
  (여기서 effect는 콜백함수이다.)

• useEffect( effect, [ ] )
  콜백함수 뒤에 빈 배열을 추가해주면, 최초 렌더링 시에만 effect를 실행한다.

• useEffect( effect, [deps] )
  최초 렌더린 시, 그리고 deps(dependencies)가 업데이트 될 때
  effect를 실행해준다. (deps : 일종의 변수)

ex

버튼을 누를 때마다 1씩 증가하는 카운터를 만들고,

카운터가 실행된 시간을 콘솔로그로 출력하는 예제를 작성해보자.

useEffect를 이용하여, 렌더링 될때마다 (= useState의 값이 변할 때마다)

렌더링 시간을 출력할 수 있도록 아래와 같이 작성하였다.

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

  useEffect(() => {
    console.log('렌더링시간:', new Date().toLocaleTimeString());
  });

  return (
    <>
      <p>{count}</p>
      <button onClick={()=>setCount(count+1)}>Add</button>
    </>
  )
}