useEffect

useEffect는 컴포넌트가 렌더링될 때마다 작업을 하도록 설정할 수 있는 Hook이다.

렌더링될 때만 실행하고 싶을 때

useEffect에서 설정한 함수를 컴포넌트가 화면에 처음 렌더링될 때만 실행하고, 업데이트될 때는 실행하지 않으려면 useEffect의 두 번째 파라미터로 비어 있는 배열을 넣어 주면 된다.

useEffect(()=>{
	console.log('어쩌구~')
},[])

특정 값이 업데이트될 때만 실행하고 싶을 때

useEffect에서 특정 값이 업데이트될 때만 실행하고 싶을 때는 useEffect의 두 번째 파라미터에 검사(관찰) 하고 싶은 값을 넣어주면 된다.

const [myName , setMyName] =useState('이동욱')
useEffect(()=>{
	console.log('이름이 변경되었음')
},[myName])

이렇게 useEffect는 기본적으로 렌더링되고 난 직후마다 실행되며, 두 번째 파라미터 배열에 무엇을 넣는지에 따라 실행 조건이 달라진다.

cleanup(뒷정리) 함수

만약 컴포넌트가 언마운트되기 전이나 업데이트되기 직전에 어떠한 작업을 수행하고 싶다면 useEffect 에서 cleanup(뒷정리) 함수를 반환해 주어야 한다.

const [myName , setMyName] = useState('이동욱')
useEffect(()=>{
	console.log('렌더링되고 난 직후 실행됨')
    console.log('myName 업데이트 직후 실행 되겠죠?')
    return ()=>{
		console.log('여기서부터 cleanup 함수')
        console.log('언마운트 되기 직전에 실행됨')
        console.log('myName 업데이트 직전에 실행되겠죠?')
        }
},[myName])

만약 오직 언마운트될 때만 cleanup 함수를 호출하고 싶다면 useEffect 함수의 두 번째 파라미터에 비어있는 배열을 넣으면 된다.

useEffect(()=>{
	console.log('가장 처음 렌더링 될때 실행되겠죠?')
    
    return ()=>{
    	console.log('언마운트될 때마다 실행되겠죠?')
    }
},[])