[React] React 생명 주기(LifeCycle)

React 생명 주기

- 리액트는 컴포넌트가 생성, 변경, 소멸되는 등의 생명 주기(Lifecycle)을 가진다.

- 각 생명 주기에 해당하는 메서드가 존재하는데, 총 9가지가 있다.

- 이 생명 주기는 총 세 가지로 마운트(생성), 업데이트(변경), 소멸(언마운트) 카테고리롤 나뉜다.

 

라이프 사이클 메서드의 사용

- 리액트 프로젝트를 진행하다 보면 가끔 컴포넌트를 처음으로 렌더링할 때 어떤 작업을 처리해야 하거나 컴포넌트를 업데이트하기 전후로 어떤 작업을 처리해야 할 수도 있고, 또 불필요한 업데이트를 방지해야 할 수도 있다.

- 이때는 컴포넌트의 라이프사이클 메서드를 사용한다.

- 라이프 사이클 메서드는 클래스형 컴포넌트에서만 사용할 수 있으며, 함수형 컴포넌트에서는 Hooks 를 사용하여 비슷한 작업을 처리할 수 있다.

 

마운트(Mount, 생성)

 

- DOM이 생성되고 웹 브라우저 상에 나타나는 것을 마운트라고 한다.

- 마운트 부분에 해당하는 생명 주기 메서드는 네 개이며, 다음과 같다.

• constructor
• getDerivedStateFromProps
• render
• componentDidMount

constructor

- 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드다.

getDerivedStateFromProps

- props에 있는 값을 state에 넣을 때 사용하는 메서드다.

render

- UI를 렌더링하는 메서드다.

componentDidMount

- 컴포넌트가 웹 브라우저상에 나타난 후 호출하는 메서드다.

 

업데이트(Update, 변경)

- 컴포넌트가 변경되는 경우이다. 여기서 '변경'이란 props나 state의 변경을 말한다.

- 변경 시 실행되는 메서드는 다음과 같다.

• getDerivedStateFromProps
• shouldComponentUpdate
• render
• getSnapshotBeforeUpdate
• componentDidUpdate

getDerivedStateFromProps

- 이 메서드는 마운트 과정에서도 호출되며, 업데이트가 시작하기 전에도 호출된다.

- props의 변화에 따라 state 값에도 변화를 주고 싶을 때 사용한다.

shouldComponentUpdate

- 컴포넌트가 리렌더링을 해야 할지 말아야 할지를 결정하는 메서드다.

- 이 메서드에서는 true 혹은 false 값을 반환해야 하며, true를 반환하면 다음 라이프사이클 메서드를 계속 실행하고, false를 반환하면 작업을 중지한다. 즉, 컴포넌트가 리렌더링되지 않는다.

- 만약 특정함수에서 this.forceUpdate() 함수를 호출한다면 이 과정을 생략하고 바로 render 함수를 호출한다.

render

- 컴포넌트를 리렌더링한다.

getSnapshotBeforeUpdate

- 컴포넌트 변화를 DOM에 반영하기 바로 직전에 호출하는 메서드다.

componentDidUpdate

- 컴포넌트의 업데이트 작업이 끝난 후 호출하는 메서드다.

 

언마운트(Unmount, 소멸)

- 마운트의 반대 과정, 즉 컴포넌트를 DOM에서 제거하는 것을 언마운트(unmount)라고 한다.

- 소멸 시 실행되는 메서드는 다음과 같다.

• componentWillUnmount

componentWillUnmount

- 컴포넌트가 웹 브라우저상에서 사라지기 전에 호출하는 메서드다.

 

 

라이프사이클 예

 

- 다음은 생성, 변경 라이프사이클 메서드를 사용한 코드다.

import { Component } from "react";

class LifecycleEx extends Component{
    static getDerivedStateFromProps(props, state){
        console.log('2. getDerivedFromProps Call :'+props.prop_value);
        return {tmp_state:props.prop_value};
    }
    constructor(props){
        super(props);
        this.state = {};
        console.log('1. constructor Call');
    }

    componentDidMount(){
        console.log('4. componentDidMount Call');
        console.log('5. tmp_state : ' + this.state.tmp_state);
        this.setState({tmp_state2: true});
    }

    shouldComponentUpdate(props, state){
        console.log('6. shouldComponentUpdate Call / tmp_state2 = ' + state.tmp_state2);
        return state.tmp_state2
    }

    render(){
        console.log('3. render Call');
        return(
            <h1>[LIFECYCLE METHOD]</h1>
        )
    }
}

export default LifecycleEx;

 

- 위 컴포넌트를 렌더링할 수 있도록 설정하고 브라우저의 콘솔을 확인해 보자.

 

브라우저 콘솔을 확인한 결과.

- 브라우저 콘솔 확인 시 위 그림과 같이 출력될 것이다.