클래스와 hooks 라이프사이클 비교. <reminder> memo

useEffect는 여러번 사용 가능하다. state마다 efffect를 사용 할 수 있기 때문임.

 

[배열에는 꼭 useEffect를 다시 실행할 값만 넣어야 한다.

관련 없는 state를 넣으면 동작이 이상해진다.]

 

<reminder>

Hooks에서 부모 컴포넌트에서 child 컴포넌트를 가지고 있으면

부모 컴포넌트가 렌더링 될때마다 무조건 child도 무조건 변경된다.

 

따라서 => memo를 사용한다.

 

memo가 함수 컴포넌트를 감싸준다.

props가 바뀌면 리렌더링이 되는데 memo 를 사용하여 

감싸줘야 re-rendering을 방지한다.

 

memo를 넣으면 pureComponent  역할을 한다.

렌더링 성능 최적화에도 도움된다.

 

 

useEffect를 조금 쉽게 이해하는 방법 

=> 

<result, imgCoord, score>

 

componentDidMount

componentDidUpdate

componentWillUnmount

====================================

useEffect 클래서에서의 사용!!!! **한꺼번에 모두 사용.

componentDidMount() {

this.setState({

imgCoord: 3,

score: 1,

result: 2,

})

}

 

useEffect hooks에서의 사용!!! 나눠서 사용 가능!!!

useEffect(() => {

setImgCoord();

setScore();

}, [imgCoord, score]);

 

useEffect(()=> {

setResult();

}, [result]);

 

***배열이 비어있으면, componentDidMount() 사용한다는 것***

** 배열이 들어가 있으면, componentDidMount() , componentDidUpdate() 둘다 사용

배열 componentDidUpdate()  사용시 조심해야 한다. 배열에 다시 시작 되는 부분을 적용해야함 or 문제가 생김.

 

return ( ) => {

 // componentWillUnmount 사용 한다는 것.

timeouts.current.forEach( ( v ) => {

   clearTimeout( v );

})

 

}