React - Lifecycle

이진화행·2022년 1월 26일

React

Parkjin

목록 보기

2/14

1. Component Lifecycle 개요

개요

생명주기 매서드는 클래스 기반 컴포넌트에 존재하는 메서드로 특정 시점에 호출되는 메서드이다.
생명주기 메서드는 컴포넌ㄴ트의 마운트(mounting), 업데이트(updating), 마운트해제(unmounting) 시점에 따라 구분하며 모두 8개의 메서드가 존재한다.
컴포넌트가 생성되고 render() 메서드를 통해 ReactElement를 반환 실제 DOM에 반영되는것을 마운트라 한다.
props, state의 데이터가 변경되거나 forceUpdate() 메서드 호출을 통해 컴포넌트가 변경되는것이 업데이트이다.

마운트

컴포넌트가 해당 컴포넌트가 생성되어 사용자에게 보여지기 까지의 전체 과정을 마운트 과정이라 한다.
위의 그림과 같이, 이 마운트때 호출되는 메소드는

생성자 컨스트럭터(constructor) > getDerivedStateFromProps > render > componentDidMount 가 호출된다. 총 4개의 라이프사이클 과정을 호출하게된다.

업데이트

이미 마운트가 되어있는 컴포넌트가 특정한 경우 다시 렌더링되어야 할때 호출되는 라이프사이클 메소드이다.
업데이트때 호출되는 메소드는

getDerivedStateFromProps > shouldComponentUpdate > render > getSnapshotBeforeUpdate > componentDidUpdate 총 5개의 라이프사이클 과정을 호출하게된다.

업데이트가 되는 특정한 상황은

New Props
setState() 변경
forceUpdate() *비권장 -> shouldComponentUpdate를 건너뛰고 진행된다.

언마운트

컴포넌트가 보여졌다가 사라지기 직전에 호출되는 메소드이다.

componentWillUnmount 가 호출된다.

2. 주요 Component Lifecycle 메서드

마운트

마운트가 된다는것은 React 컴포넌트가 실제 DOM에 삽입된다는것을 의미한다

Constructor

constructor(props){
	super(props); // 필수코드
    this.state = {
    	counter : 0
    }
    this.onButtonClick = this.onButtonClick.bind(this);
    // 이벤트 메소드 바인딩
}

참고

super()생성자 호출 이전에는 this가 할당되지 않는다.
super() 생성자 파라미터로 props의 전달의 목적은 생성자 내부에서 this.props 접근이 가능하도록 하기위해서이다.

진행작업들

state를 사용한다면 state에 대한 초기화 작업을 일반적으로 생성자에서 진행을한다. (할당, 초기화..)
이벤트 메소드가 있을경우, 이벤트 메소드에 대한 디스바인딩 처리를 생성자에서 일괄적으로 처리하고, 진행하는 방식이있다. 총 4가지의 방법이있는데,
1. this.onButtonClick = this.onButtonClick.bind(this);
- 이벤트 메소드에다 binding을 하는방법
1. <태그 onClick = {this.onButtonClick.bind(this)}/>
- 일반적으로 이벤트가 발생하는 곳에서 바인드를 지정하는 방법
1. <태그 onClick = {() => {}}
- arrow function을 이용하면 별도로 별도로 바인딩 메소드를 호출할 필요가없다.
1. auton-bind library이용

componentDidMount

진행작업들

데이터 로딩에 작업을 진행한다
Server에 가서 data를 읽어오는 작업, state에 들어오는 data를 세팅하는작업이다.
렌더 메소드까지 호출되고 실제 리얼돔, 마운트가 되고 난 다음 직후에 바로 호출된다.(화면에 보여야되는 요소가 다 올라간후) 데이터를 붙이는작업

업데이트

getDerivedStateFromProps
진행작업들

props로부터 state를 동기화하고싶을때 사용되는 메소드이다.
두개의 parameter를 받는다 (nextProps, prevState)
props와 state값을 비교하여 새로운 state값을 세팅한다.

shouldComponentUpdate
진행작업들

성능을 향상시킬때 주로 사용된다.
true나 false를 리턴한다.
true나 false를 리턴하는 조건은 이전에 가지고 있던 컴포넌트가 가지고있던 state, props와 shouldComponentUpdate의 parameter인 nextProps와 prevState가 같냐 같지 않냐에 따라서 true 또는 false가 리턴된다.
Pure component가 재정의하고있는 shouldComponent는 얕은비교이다.

getSnapshotBeforeUpdate
진행작업들