[React] Hook 간단하게 정리하는 라이프 사이클

기존 라이프 사이클에 익숙해 지기전에 

Hook 라이프 사이클을 간단하게 정리해봄.

 

Hook

// componentDidMout
useEffect(()=>{
// 처음 화면이 랜더링 된 후 실행 할 로직.
}, []}

우선 useEffect 즉 화면이 처음 랜더링(표시) 된 뒤 실행하는 로직임.

//componentDidUpdate
const mounted = useRef(false);
//랜더링 되지않는 (화면에 표시하지 않는) 값은 useRef를 활용

useEffect(()=>{
	if(!mounted.current) mounted.current = true;
    // 실행할 로직
}, [/*변경되는 값 or 변경이 되면 위 함수를 실행*/]);

그 다음은 화면이 표시 된 후 useEffect의 []를 활용한 로직

 

마지막으로

// componentDidMount, componentDidUpdate
useEffect(()=>{
	//실행할 로직
}, [/*변경될값 or 이 값이 변경되면 위 로직 실행*/]);

 

위 사이클을 생각하고 코딩하면 좋음