React 기초 학습 13. 라이프사이클, setState여러번, useEffect(Zerocho님 강의 학습 의식의 흐름대로 노트 정리)

강의 유튜브 주소 :

https://www.youtube.com/watch?v=V3QsSrldHqI&list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn

 

 

// 고차함수

this.onClick = (arg) => (e) => {
	//	...
}

render(){
	return(
		<button onClick={this.onClick()}>
    );
}

(arg) => 뒤에 arrow function을 추가해서 감싸줄 수 있다.

 

여러번 setState를 호출해도 한번만 렌더링한다.

이것은 react가 알아서 처리한다.

setState({})
setState({})
setState({})
setState({})
setState({})

 

class 컴포넌트에서 라이프사이클을 쓸 수 있는데 함수컴포넌트에서는 어떻게쓰는가?

componentDidMount, componentDidUpdate, componentWillunMount를 useEffect로 흉내낼 수 있다.

각각의 역할이 1:1로 대응이 되는건 아니고 useEffect하나로 한번에 흉내낼 수 있다. (각각쓸수도 있다)

// 선언
import React, {useEffect} from 'react';

const Test = () => {

    //...

	//componentDidMount, componentDidUpdate 역할을 동시에 함(1:1 아님)
    useEffect(() => { 

		// componentDidMount, componentDidUpdate 때 적용할 코드를 적으면 된다.
        // ....
    
    	// componentWillunMount 때 적용할 코드를 적으면 된다.
        return () => { 
            // ....
        }       

    // 2.여기에넣는 인자값에 변화가 있을때 useEffect가 다시 실행된다.
    }, [imgCoord]);
}

첫번째가 실행될 함수고 두번째는 인자값은 state를 넣어주는데, 이 인자값에 변화가 있을때마다 useEffect가 실행된다.

그래서 완벽히 똑같지 않고 라이프사이클을 흉내낸다고한다.

 

만약 아무것도 넣지 않았을 경우에는 딱 한번만 실행된다. (componentDidMount)

import React, {useEffect} from 'react';

const Test = () => {
    useEffect(() => { 
        return () => { 
            // ....
        }       
    }, []);
}

 

또 useEffect는 여러개를 사용할 수 있다.

각각의 state의 변화에 따라 동작이 다를 경우를 예로 들어본다.

import React, {useEffect} from 'react';

const Test = () => {
    useEffect(() => { 
        return () => { 
            // ....
        }       
    }, [value]);
    
    useEffect(() => { 
        return () => { 
            // ....
        }       
    }, [code]);
}

(만약 class컴포넌트에서 여러개를 사용하고자하면 라이프사이클안에서 조건문을 활용하면된다)

 

pureComponent와 같이 얕은 객체를 비교해주는게 있는데 함수형컴포넌트에서는 memo를 사용해준다.

import React, { memo } from 'react';

const RES = memo(() => {

 

useLayoutEffect도 있는데, 이건 화면 렌더링이 끝나고 실행된다고 한다.

resizing이 끝나고 나서 화면(layout)이 바뀌는 것을 감지할때 쓴다.

사용법은 useEffect와 동일하다. 

(완전히 바뀌고 나서 실행할 것인지에 대해 생각하고 사용한다)

 

아 그리고 setInterval, setTimeout을 사용할 경우 render안에서 사용하면 안되고 

componentWillunMount에서 clearInterval, clearTimeout을 꼭해줘야한다.

부모컴포넌트에서 자식컴포넌트를 삭제할때를 대비해서 해줘야한다.

해주지 않을 경우 계속 메모리상에서 실행되고 있다.(setState에 귀속되고 있기 때문에 제거!)

 

보통 컴포넌트를 어떻게 쪼개나? 할때 반복문을 기점으로 쪼개는 경우가 많다.

자식컴포넌트로 넘기는 데이터가 없는 경우에는 pureComponent로 만들어서 재렌더링이 되는 것을 방지하자.

혹은 데이터가 필요없으면 일반 함수 컴포넌트로 만든다. 그후 memo를 통해 최적화한다. 

memo로 감싸주면 hoc가 된다.(high order component)

(최적화할때 확인하고 재렌더링이 필요없는데 일어날경우 처리해준다)

 

그리고 componentWillReceiveProps, willMount, willUpdate는 곧 없어질 예정이니 사용하지 말라고한다.

will시리즈는 willunMount를 제외하고는 사라질 예정이라고한다.

 

componentDidUpdate는 state나 props 변화가 생겼을때 비교를 통해 재렌더링을 할지 말지를 결정할 수 있다.

return값이 true일 경우 재 렌더링을 한다.

componentDidUpdate(prevProps, prevState) {
  // prevState는 변하기 전 state의 값, this.state는 변화된 현재의 state값
  if (this.state.id !== prevState.id) {
		return true;
  }
}