React Class Component lifeCycle

React Class Component lifeCycle

리액트 공부를 하다 보면 우리는 lifeCycle를 접하게 되는 시점이 오게 된다.
lifecycle이란 무엇일까? 그리고 이것을 왜 알아야 할까?
결론부터 이야기를 하자면 리액트의 컴포넌트는 각각 3가지 카테고리가 존재한다.
각각의 카테고리는 다음과 같이 마운트(Mounting), 업데이트(Updating), 언마운트(Unmounting)
세 가지 단계가 존재하며 각 단계에서 호출되는 메서드를 이용하여 컴포넌트를 관리하게 된다.
이러한 라이프 사이클을 이해하면 보다 최적화하여 사용자에게 높은 서비스 제공이 가능하다.

 

시작에 앞서 아래의 생명주기는 Class Component에서 사용이 되며 function Type Component는 다르다.

마운트(Mounting)

마운트는 컴포넌트의 생성되는 과정을 의미하며 마운트 단계의 메서드 호출 주기는 다음과 같다.

constructor → getDerivedStateFromProps → render → componentDidMount

 

1. constructor

마운트 시점에 제일 처음 호출이 되는 메서드로 컴포넌트를 새로 생성할 때 사용된다.
해당 메서드에서 컴포넌트를 만들 때 처음으로 실행되며 생성자 내부에서는 state 초기화를 할 수 있다.

class Component extends React.Component{
	/* 1. 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메소드이다. */
     constructor(props) {

      super(props);

      console.log('constructor');

       this.state = {
            text: '초기값'
       };
   }
}

 

2. getDerivedStateFromProps

props로 받아온 값을 state에 동기화시키는 용도로 사용하며, 마운트와 업데이트 시 호출된다.

state를 변경할 필요가 없다면 null을 반환해야 한다.

static getDerivedStateFromProps(nextProps, nextState) {

      console.log('getDerivedStateFromProps');

      return null;        // state를 변경할 필요가 없다면 null을 반환한다.
}

 

3. render

리액트 엘리먼트를 가상돔으로 구성하고 실제 렌더트리까지 구성하는 시점에 호출되는 메서드이다.

랜더링 될 컴포넌트의 형태를 리액트 컴포넌트로 반환하며 라이프 사이클 메서드 중 유일한 필수 메소드로 render 메소드 this.prop와 this.state에 접근할 수 있다.

아무런 컴포넌트도 보여주지 않은 경우 null 혹은 falsy 값을 반환하도록 한다.

해당 메서드에서 state에 접근하는 것은 가능하지만 state의 값을 변경하는 행위를 만들어서는 안 된다.

브라우저의 Dom에 접근하는 행위도 안된다.

redner(){
	return{
		<>
			<h1>현재 상태값, {this.state.text{속성}}</h1>
		</>
	}
}

 

4. componentDidMount

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

해당 컴포넌트는 컴포넌트 형성 이후 호출되는 특성을 가지고 있어 다른 서드파티를 호출하거나 이벤트 등록과 같은 행위 및 api 요청과 같은 내용을 처리한다.

componentDidMount(){
	const api = fetch().then();
}

 

업데이트 (Updating)

컴포넌트의 상태가 변경되는 시점에 호출이 되며 업데이트는 다음과 같은 과정을 거치게 된다.

1. props : 부모 컴포넌트에서 자식 컴포넌트에 전달되는 값이 변경되는 경우

2. state : 값이 변경 시 업데이트가 된다 하지만 shouldComponentUpdate를 통해 render를 조절할 수 있다.

3. 부모 컴포넌트 리렌더링 : 부모 컴포넌트를 새롭게 렌더링 하는 경우

4. this.forceUpdate : 렌더링을 강제로 하는 트리거이며 거의 사용하지 않는다.

 

1. getDerivedStateFromProps(nextProps, nextState)

props로 받아온 값을 State에 넣어주는 경우 사용하며 마운트 및 업데이트에 호출된다.

 

nextProps : 리 렌더링 시 변경된 props의 값

nextState : 리 렌더링 시 변경된 state의 값

static getDerivedStateFromProps(nextProps, nextState) {

      return null;        // state에 변화를 주고 싶지 않다면 null을 반환
}

 

2. shouldComponentUpdate(nextProps, nextState)

컴포넌트의 리렌더링 여부를 결정하는 메서드이다.
성능 최적화를 목적으로 하며, 상화에 따라 리렌더링을 방지할 목적으로 사용한다.

nextProps : 전달받은 props의 값을 알려준다.

nextState : 전달 받은 state의 값을 알려준다.

return : 반드시 boolean을 반환해야 하며 false의 경우 render 이후 생명 주기 호출이 중단된다.

shouldComponentUpdate(nextProps, nextState) {

    return true;
}

3. render

컴포넌트 마운트 및 업데이트 시 호출되는 메서드이다.

render() {
   return (
         <>
            <button
                onClick={() => this.setState({now: new Date().toLocaleTimeString()})}
             >
                 현재 시간 확인하기
            </button>
            <h1>{this.state.now}</h1>
         </>
      );
  }

 

4. getSnapshotBeforeUpdate(prevProps, prevState)

컴포넌트의 변화를 실제 Dom에 반영하기 직전에 호출되는 메서드이다.

리액트 16.3 이후에 지원하였으며 반환 값은 componentDidUpdate의 마지막 인자로 전달이 가능하다.

getSnapshotBeforeUpdate(prevProps, prevState) {
               
    return {
         message: '스냅샷 입니다.'
    }
}

 

5. componentDidUpdate(prevProps, prevState, snapshot)

컴포넌트 업데이트 작업이 종료된 후 호출되는 메서드이다.

리렌더링이 끝나고 화면에 update가 된 이후 실행된다.

컴포넌트가 이전에 가졌던 데이터를 prevProps, prevState로 접근이 가능하며 getSnapshotBeforeUpdate에서 반환된 값을 마지막 인자인 snapshot로 받을 수 있다.

componentDidUpdate(prevProps, prevState, snapshot) {

}

 

언마운트(Unmounting)

화면에서 DOM이 소멸되는 시점에 실행되며 componentWillUnmount를 실행한다.

1. componentWillUnmount

컴포넌트 등록시 만들어진 이벤트 및 리소스 제거가 필요한 경우 해당 메소드에서 처리한다.

componentWillUnmount() {

}