Lifecycle

📌 리액트 공식문서와 리액트를 다루는 기술을 참고하여 작성한 글입니다.

9가지의 생명주기 메서드가 있습니다. 하나씩 살펴봅시다..!

마운트

마운트될때 발생하는 생명주기 입니다.

• constructor
• getDerivedStateFromProps
• render
• componentDidMount

constructor

• constructor 는 컴포넌트의 생성자 메서드입니다.
• 컴포넌트가 만들어지면 가장 먼저 실행되는 메서드입니다.

constructor(props) {
    super(props);
    console.log("constructor");
}

getDerivedStateFromProps

• getDerivedStateFromProps 는 props 로 받아온 것을 state 에 넣어주고 싶을 때 사용합니다.
• 컴포넌트가 마운트될때와 업데이트될때 호출됩니다.

static getDerivedStateFromProps(nextProps, prevState) {
    console.log("getDerivedStateFromProps");
    return null;
}

render

• 컴포넌트를 렌더링하는 메서드입니다.

componentDidMount

• 컴포넌트의 첫번째 렌더링이 마치고 나면 호출되는 메서드입니다.

업데이트

업데이트될때 발생하는 생명주기 입니다.

• getDerivedStateFromProps
• shouldComponentUpdate
• render
• getSnapshotBeforeUpdate
• componentDidUpdate

getDerivedStateFromProps

위에와 동일

shouldComponentUpdate

• shouldComponentUpdate 메서드는 컴포넌트가 리렌더링 할지 말지를 결정하는 메서드입니다.

shouldComponentUpdate(nextProps, nextState) {
    console.log("shouldComponentUpdate");
    return true;
}

render

위에와 동일

getSnapshotBeforeUpdate

• getSnapshotBeforeUpdate 는 render에서 만들어진 결과물이 브라우저에 실제로 반영되기 직전에 호출됩니다.
• 이 메서드에서 반환한 값은 componentDidUpdate 함수에 세번째 파라미터인 snapshot 값으로 전달받을 수 있습니다.

getSnapshotBeforeUpdate(prevProps, prevState) {
    console.log("getSnapshotBeforeUpdate");
    return null;
}

componentDidUpdate

• componentDidUpdate 는 리렌더링이 마치고, 화면에 우리가 원하는 변화가 모두 반영되고 난 뒤 호출되는 메서드입니다.

componentDidUpdate(prevProps, prevState, snapshot) {
    console.log("componentDidUpdate");
}

언마운트

언마운트에 관련된 생명주기 메서드는 componentWillUnmount 하나입니다.

componentWillUnmount

• componentWillUnmount 는 컴포넌트가 화면에서 사라지기 직전에 호출됩니다.

componentWillUnmount() {
    console.log("componentWillUnmount");
}

에러

componentDidCatch

• 컴포넌트 렌더링 도중에 에러가 발생했을 때 오류 UI를 보여줄수 있게 해줍니다.