(React) 리액트 라이프 사이클 순서 + useEffect 설명 포함

1. 클래스 타입의 Component인 경우

- 기본 골격은 다음과 같다.

class Lifecycle extends Component{

	render(){
    	return (
        	<>
            	<div> sample test!</div>
            </>
        );
    };
}

라이프사이클 상 컴포넌트 실행시 호출되는 함수를 추가할 수 있다. 

class Lifecycle extends Component{

	componentDidMount(){
     // 컴포넌트가 첫 렌더링된 후 : 여기서 비동기 요청을 한다.
    }
    
    componentDidUpdate(){
     // 리렌더링 후
    }
    
    componentWillUnmount(){
    	// 컴포넌트가 제거되기 직전 : 비동기 요청 정리를 한다.
    }

	render(){
    	return (
        	<>
            	<div> sample test!</div>
            </>
        );
    };
}

실제 호출되는 순서를 정리해보면, 아래와 같다. (클래스의 경우)

constructor -> render ->ref -> componentDidMount
-> setState/props 바뀔 때 -> shouldComponentUpdate(true) -> (render) -> componentDidUpdate 
-> 부모가 나를 없앴을 때 -> componentWillUnmount -> 소멸

shouldComponentUpdate와 PureComponent는 리렌더링을 최소화하여 성능 최적화를 할 때, 주로 사용된다.

(중요) componentDidMount에서는 비동기 요청을, componentWillUnmount에서는 비동기 정리를 한다.

	interval;
    
    componentDidMount(){
     // 컴포넌트가 첫 렌더링된 후 : 여기서 비동기 요청을 한다.
     this.interval = setInterval(handler:() => {
     	console.log('test');
     },1000);
    }
    
    componentDidUpdate(){
     // 리렌더링 후
    }
    
    componentWillUnmount(){
    	// 컴포넌트가 제거되기 직전 : 비동기 요청 정리를 한다.
        clearInterval(this.interval);
    }

2. Hook 타입의 Component인 경우

Class 타입과 달리 componentDidMount 와 componentDidUpdate, componentWillUnmount 를 사용할 수 없다.

대신, 여기서 등장하는 게 useEffect이다. 

useEffect는 componentDidMount와 componentDidUpdate, componentWillUnmount  를 합쳐서 적용할 수 있게 해준다.

const interval = useRef();

useEffect(()=>{
	// 여기가 componentDidMount, componentDidUpdate 역할
    interval.current = setInterval(func, 100);
    return ()=>{
        // 여기가 componentWillUnmount 역할
    	clearInverval(interval.current);
    }
}, [changingState]);
// useEffect의 마지막 배열 [] 안에는 변화가 있는 state를 적으면 된다.
// -> 그러면, state가 변화할 때마다 계속 re-Rendering된다.
// 만약에, 마지막 배열 []안을 비우면,.,..
// 처음에 딱 1번만 실행된다. componentDidMount만 된 것이다.

useEffect가 정확하게 class타입의 라이프 사이틀과 1:1로 일치하지는 않는다.

하지만, useEffect의 마지막 요소인 배열[ ]을 어떻게 하느냐에 따라서 re-rendering을 계속하는 update를 할 것이냐 아니면, didMount만 할 것이냐가 결정된다.

 

(번외) 리렌더링 관련 이슈 -> 성능 최적화  방법

 >>> class 버전 : shouldComponentUpdate, PureComponent

 >>> hook 버전 : memo

hook 버전에서 앞에 memo를 붙이면, props가 바뀌더라도 계속 re-rendering 되지 않도록 할 수 있다.

import {memo} from 'React';

const RSP = memo()=>{
	//...
    //... todo
}