[React] useEffect 사용

Mount : 페이지 로딩

Update : 페이지 재랜더링

unMount : 다른 페이지 로딩

 

 

Mount, Update 될 때 실행

useEffect(() => {
	//실행문
});

 

 

Mount 될 때만 실행

useEffect(() => {
	//실행문
}, []);

 

 

 

a가 Update 될 때 실행

useEffect(() => {
	//실행문
}, [a]);

 

 

 

a와 b 둘 다 Update 될 때 실행

useEffect(() => {
	//실행문
}, [a, b]);

 

 

 

 

return 옵션

useEffect(() => {
	//실행문

    return () => {
     //return 실행문
    }
    
}, []);

return문은 useEffect 안의 내용이 실행되기 전에 실행됩니다.

Mount할 때는 실행 안되고 unMount할 때 실행됨!

 

보통 clean up 사전에 데이터를 초기화시킬 때 사용합니다!

 

 

 

 

 

스프링부트에서 비동기로 데이터를 받아올 때

useEffect(() => {
	axios.get('/').then(res => {
    	console.log(res.data); //실행문
    });
}, []);