useEffect

useEffect

useEffect는 함수형 컴포넌트에서 사용하는 HooK이다.
useEffect는 컴퍼넌트가 마운트 됐을 때(처음 랜더링할 때), 언마운트가 됐을 때(사라질 때), 업데이트가 될 때(특정 props가 바뀔 때) 특정한 작업을 처리하는 것이다.

import {useState, useEffect} from "react"

function Example () {
	const [count, setCount] = useState(0)
    
    const handlerCountUp = () => setCount(count + 1);
  
	useEffect(() => {
    	console.log("랜더링")
      	console.log({count})
    })
  
  	return (
    	<div className="background">
      		<p>카운트 : {count}</p>
			<button onClick={handleCountUp}>카운트 업</button>
      	</div>
    )

}

처음 랜더링이 될 때 useEffect로 인해서 콘솔 창에 '랜더링' 이라는 글짜와 count 값이 나타난다. 그 이후에 button을 클릭해서 handleCountUp이 실행이 되면 업데이트가 되면서 재랜더링이 실행이 되고 다시 한 번 useEffect로 인해서 '랜더링'이라는 글짜와 count값이 콘솔 창에 나타나게 된다.

그래서 useEffect는 우리가 랜더링을 하거나 업데이트를 할 때 실행이 필요한 로직을 넣어주면 된다.