[React] 리액트 Hook - useEffect( ) 함수 이해 쉬운 개념 정리

 

 

 

 

 

 

◾ useEffect 개념

useEffect(()=>{ //원하는 작업  });

- 인자로 콜백함수를 받는다.

-  콜백함수 : 다른 함수의 인자로 전달된 함수를 의미

 

 

◾ useEffect 형태

1) useEffect의 인자로 하나의 콜백함수만 받는 형태

- 컨퍼넌트가 매번 랜더링이 될때마다 콜백이 실행됨

useEffect(()=>{ 

		//원하는 작업  

});

 

 

2) useEffect의 첫번째 인자로 콜백함수, 두번째 인자로 배열(dependency array)을 받는 형태

- 화면에 첫 렌더링이 될때 실행되고 value 값이 바뀔때 실행됨

useEffect(()=>{ 

		//원하는 작업  

},[value]);

 

 

3) useEffect의 첫번째 인자로 콜백함수, 두번째 인자로 빈 배열을 받는 형태

- 컨퍼넌트가 맨 처음 화면에 렌더링 될때만 실행됨

useEffect(()=>{ 

		//원하는 작업  

},[ ]);

 

◾ clean up

-  useEffect에서 등록한 리스너를 제거해주는 작업

useEffect(()=>{ 

		//원하는 작업 
        
        return ()=>{
        
        // 했던 작업 해지
        
        }

},[ ]);