[REACT] useEffect 사용해보기

전에도 useEffect 부분에서 너무 어려워서 하다가 도망갔었는데 다시 돌아왔다.

마운트, 언마운트 개념보다 좀 더 쉽게 이해해보기 위해서는,
useEffect는 사이드이펙트의 동작을 관리한다고 보면 됨.
즉, 외부 API를 요청한다거나, 라이브러리를 사용한다거나, setInterval을 사용한다거나 굳이 화면에 띄울 필요도 없고 렌더링 이후에 작용되는 작업들을 여기에 때려넣어주면 된다.

이게 뭔소린지 이해하는데 아주아주 한~~참 걸렸었움

DOM 업데이트 이후에 호출

DOM 업데이트, 즉 화면에 보여주는 부분을 죄다 렌더링하고 나서 이제 뭐할까 뭐가 남았나 할 때 useEffect를 사용한다는 것임.

class Example extends React.Component{
	constructor(props){
    ...
    }
    
    componentDidMount(){
    	document.title = ...
    }
    ...
    render(){
    	return(...)
    }

클래스 컴포넌트에서는 컴포넌트 생명주기인 componentDidMount, componentDidUpdate 등등은 render 단계 이후인 commit 단계에서 적용되던 것들임.

const Example = () => {
	const [count, setCount] = useState(0);
    useEffect(() => {
    	document.title = ...;
    })
    ...
    

effect hook은 componentDidMount, componentDidUpdate, componentWillUnMount를 모두 합친 것임. 클래스 컴포넌트처럼 일일이 정의해줄 필요가 없음. 마찬가지로 렌더링 이후에 실행됨. 대신 effect hook은 두번째 인자로 deps를 받아서 호출 빈도를 정할 수 있음.

당연한 얘기지만 Hook이므로 React 함수 내에서만 호출 가능함.

const App= ()=>{
	useEffect(...);//가능!
    	if(){
    		useEffect();
    	}//Error~

useEffect 사용될 때

1. 컴포넌트 마운트
   -props 로 받은 값을 컴포넌트의 로컬 상태로 설정
   -외부 API 요청 (REST API 등)
   -라이브러리 사용 (D3, Video.js 등...)
   -setInterval 을 통한 반복작업 혹은 setTimeout 을 통한 작업 예약

2. 컴포넌트 언마운트 : return 사용하여 정리(cleanup)
   -함수 반환 : cleanup 함수
   -setInterval, setTimeout 을 사용하여 등록한 작업들 clear 하기 (clearInterval, clearTimeout)
   -라이브러리 인스턴스 제거

3. 특정 props 업데이트

deps?

-첫번째 파라미터 : 함수 / 두번째 파라미터 : 의존값이 들어있는 배열 (deps)
-deps : []인 경우, 처음에만 함수 호출
-deps 넣은 경우 : 처음과 deps값 변경될 때 호출
-deps 아예 안 넣은 경우, 컴포넌트 리렌더링될 때 호출

출처 : https://react.vlpt.us/basic/16-useEffect.html