[React] useEffect 사용 방법

useEffect는 컴포넌트가 빌드 되었을 때, 업데이트 될 때 마다 실행하게 되는 훅 입니다.

export default function Count () {
	const [count, setCount] = useState()
    
    console.log("Count On")
    
	return <button onClick={()=> setCount((current) => current + 1}>{count}</button>
}

위와 같은 코드를 작성하게 되면, count의 상태가 변경될 때 마다 React는 컴포넌트를 refresh하기 때문에, console.log("Count On") 부분이 계속 찍히게 됩니다.

 

하지만 저희는 해당 컴포넌트가 빌드 되었을 때 한 번만 실행하고 싶기에 useEffect를 사용하게 됩니다.

import { useEffect } from 'react'

export default function Count () {
	const [count, setCount] = useState()
    
    useEffect(() => {
    	console.log("Count On")
    }, [])
    
    
	return <button onClick={()=> setCount((current) => current + 1}>{count}</button>
}

위와 같이 코드를 작성하면, Count 컴포넌트가 빌드 되었을 때 한 번만 console.log("Count On")을 실행 시키게 된다.

 

참고로 아래와 같이 작성하면, 컴포넌트가 빌드 되었을 때와 사라졌을 때의 코드를 작성 가능하다.

import { useEffect } from 'react'

export default function Count () {
	const [count, setCount] = useState()
    
    useEffect(() => {
    	//컴포넌트가 생길 때
    	console.log("Count On")
        //컴포넌트가 없어질 때
    	return () => {
        	console.log("Count Out")
        }
    }, [])
    
    
	return <button onClick={()=> setCount((current) => current + 1}>{count}</button>
}

 

만약에 코드를 작성할 때, 하나의 상태가 변경 될 때 마다 실행 시키고 싶은 코드가 있다면 아래와 같이 작성한다.

 

import { useEffect } from 'react'

export default function Count () {
	const [count, setCount] = useState()
    
    useEffect(() => {
    	console.log("Count On")
    }, [count])
    
    
	return <button onClick={()=> setCount((current) => current + 1}>{count}</button>
}

 

useEffect 배열 부분에 상태의 변수를 넣게 되면 해당 상태가 변경 될 때 마다 useEffect가 실행 된다.