section4. 5-6 클래스와 Hooks 라이프사이클 비교

비교

state가 바뀌었을 때 

• class의 경우 componentDidMount나 componentDidUpdate에서 모든 state를 조건문으로 분기처리한다.
• hooks의 경우 useEffect의 2번째 파라미터인 의존배열만 다르게 하여 useEffect를 여러 개 사용하면 된다. (배열에는 꼭 useEffect를 다시 실행할 값만 넣으세요)

state를 동시에 담당하는 법(?)

• componentDidMount는 [result, imgCoords, score] 이러한 state들을 한번에 담당한다.  (하나의 componentDidMount 에서 state별로 조건분기를 하든 어떻게 하든 하나의 클래스에는 하나의 라이프사이클 메소드만 존재한다고 말하고 싶은거같다.) --> (componentDidUpdate,componentWillUnmount 도 마찬가지이다.)
• hooks에서는 result용 useEffect, imgCoords용 useEffect 이렇게 useEffect를 state별로 하나씩 만들 수 있다. 하지만 하나의 useEffect에서 동시에 result, imgCoords 2개의 state를 담당할 수 도 있긴함.
•  

//클래스에서는 하나의 라이프사이클 메서드에서 state여러 개를 한번에 처리
componentDidMount(){
	this.setState({
    	imgCoord: 3,
        score: 1,
        result: 2,
    })
}


//hooks의 useEffect에서는 각각 처리하거나, 묶어서 처리 가능
useEffect(()=>{
	setImgCoord(2);
	setScore(0);
},[imgCoord, score]);
useEffect(()=>{
	setResult('');
},[result]);

 

useEffect vs useLayoutEffect

• useEffect는 렌더링이 실행되고 나서 실행된다.
• useLayoutEffect는 렌더링 되기 전에 실행돼서 화면 바뀌는것을 감지하는 Effect이다. (자주 사용안한다고 하심)

 

복습

• 부모 컴포넌트에서 자식 컴포넌트를 가지고 있을 때 부모 컴포넌트가 리렌더링 되면 자식 컴포넌트도 무조건 리렌더링 되는데 부모 컴포넌트가 리렌더링 될 때 굳이 자식 컴포넌트를 리렌더링 할 필요가 없을 때 React.memo를 사용하면 자식 컴포넌트는 리렌더링 되지 않는다.
• useEffect 하나에서 componentDidUpdate,componentWillUnmount, componentDidMount 세 개를 동시에 처리할 수 있다고 생각하면 편리할 듯!