[React] 컴포넌트 생명주기

클래스형 컴포넌트 생명주기

 

컴포넌트의 생명주기 과정으로는 아래와 같이 있다

Mount(생성) -> Update(갱신) -> Unmount(제거)

 

클래스 컴포넌트로 화면에 표시될 인스턴스를 생성하게 되면

클래스형에서만 호출할 수 있는 함수들이 생긴다

class ... extends Component {
    componentDidMount() {
        console.log("DidMount");
    }
    componentDidUpdate() {
    	console.log("DidUpdate");
    }
    componentWillUnmount() {
    	console.log("WillUnmount");
    }
}

 

componentDidMount

화면에 표시될 인스턴스가 생성되면 호출되는 함수

componentDidUpdate

화면에 표시된 인스턴스가 상태변화되면 호출되는 함수

componentWillUnMount

화면에 표시된 인스턴스가 제거되면 호출되는 함수

 

함수형 컴포넌트 생명주기

클래스형과 다른 useEffect와 useLayoutEffect 가 존재하는데, 사실상 useEffect 단 하나만 쓰인다

useEffect 하나만으로 세가지의 역할(생성,갱신,제거)을 구현할 수 있기 때문이다

그래서 함수형 컴포넌트는 useEffect 하나만 있다고 생각해도 된다

때문에 클래스형보다 구조나 코드가 간결하다는 특징이 있다 

 

useEffect의 배열 형태에 따른 실행시점 차이 

useEffect(() => {
    첫번째 인자(함수)
}, [두번째 인자(배열)])

 

첫번째 인자(함수)는 useEffect가 호출되면 실행될 코드

두번째 인자(배열)은 호출되는 조건을 정의해줄 배열이다

그래서 두번째 인자를 어떻게 쓰냐에 따라 실행시점이 달라진다

 

마운트, 언마운트, 리렌더링, 특정 상태값 변화

배열을 주지 않으면? DidMount + DidUpdate

빈 배열을 주면? DidMount

배열에 값을 담으면? DidMount + DidUptate

함수를 리턴하면? DidMount + DidUpdate + WillUnmout

 

이렇게 useEffect함수 하나로 세가지 기능 구현이 가능하게 된다!