[React] React.js의 useEffect() 함수

 

React.js의 useEffect() 함수

React에서 컴포넌트를 작성할 때에는 클래스형 컴포넌트와 함수형 컴포넌트가 있습니다. 클래스형 컴포넌트에서는 라이프사이클을 사용하게 되지만 함수형 컴포넌트에서는 라이프사이클을 사용할 수 없는데 이때 사용되는 함수가 useEffect() 함수입니다. 컴포넌트가 화면에 나타나거나, 사라질 때 또는 업데이트될 때에 렌더링을 해주는 함수입니다.(컴포넌트가 마운트 될 때 실행되는 함수입니다.)

 

 

useEffect() 함수의 가장 기본적으로 사용될 때의 예시입니다.

//렌더링이 완료될때마다 실행
useEffect(() => {

});

//처음 렌더링이 완료된후 text값이 변경될때마다 실행
useEffect(() => {

},[text]);

//처음 렌더링이 완료된후에만 실행
useEffect(() => {

},[]);

 

처음 렌더링 된 후에 뒷정리 함수 반환후에 실행되는 예시입니다.

useEffect(() => {
	// componentDidMount
	// 컴포넌트가 렌더링 될 때마다 호출하고 싶은 함수를 이 곳에 넣습니다.
  return () => {
	// componentWillUnmount
    	// 컴포넌트가 화면에서 사라질때 실행되는 함수를 이곳에 넣습니다.    
  }
}, [state, prop])

//state, prop 값이 업데이될때마다 실행

 

생명주기 메서드의 종류

will Method - 작업이 실행되지 직전에 호출되는 Method입니다.

did Method - 작업이 실행된 직후에 호출되는 Method입니다.