[ReactJS] React Component LifeCycle API

우선, React Component가 하는 일?

render()메소드를 사용해 무엇을 렌더링할 지 설명합니다. 

하지만, Componenet가 렌더링 되기 전/후에 추가적인 동작은 render()메소드에서 처리할 수 없습니다.

 

컴포넌트 LifeCycle

컴포넌트는 렌더링 전/렌더링 중/렌더링 후 등의 다양한 단계가 있습니다. 

리액트에선 이런 과정을 컴포넌트 생명주기라 부르고 React컴포넌트는 이런 과정을 거칩니다. 

이런 과정 단계에 원하는 메소드를 끼워 실행시켜 전반적인 제어를 할 수 있습니다.

 

이런 메소드를 Component LifeCycle API라 합니다

 

이런 컴포넌트 생명주기 메소드는 세 그룹으로 나뉩니다.

1. 마운트 : 컴포넌트가 DOM에 삽입되는 단계

2. 업데이트 : 실제 DOM이 업데이트를 해야하는 지 알아보기 위해 가상DOM에 컴포넌트를  재 렌더링하는 단계

3. 마운트 해제 : 컴포넌트가 DOM에서 제거되는 단계

 

마운트 단계 -> 업데이트 단계 -> 마운트 해제 단계

 

마운트 단계 

마운트 단계는 마운트 해제 후 다시 마운트하지 않는 한 한 번만 실행됩니다.

constructor()  ->  componentWillMount()  ->  render()  ->  componentDidMount()

컴포넌트가 DOM에 삽입될 때 이 메소드들은 한 번씩 호출!

 

componentWillMount() : deprecated됨!

두 번째로 실행. 리액트가 DOM에 삽입되기 직전 실행! 

UNSAFE_componenetWillMount() 라는 이름으로 사용할 수 있지만

이 API로 하던 일들을 constructor()과 componentDidMount()로 충분히 해결할 수 있으니

별로 신경 안 써도 됩니다. getSnapshotBeforeUpdate()로 대체.

 

componentDidMount()

 리액트가 컴포넌트를 DOM에 삽입한 직후에 실행. 이 메서드에선 update된 DOM에 접근이 가능하므로,

1.DOM에 접근하는 외부 JS라이브러리를 초기화하는 데 최적의 위치입니다.

2.DOM이 삽입된 후 이므로 Ajax(fetch, axios)같은 데이터 request처리도 진행

*리액트와 리액트가 아닌 서드-파티-라이브러리를 통합하는데 주로 사용하는 컴포넌트 생명주기 메서드

 

 

 

마운트 해제 단계

componenetWillUnmount()

리액트는 마운트 해제 단계에서 이 메서드 하나만 제공.

리액트 DOM에서 Componenet를 제거하고 소멸시키기 직전 실행.

컴포넌트가 Mount되거나 Update되는 때에 생성된 데이터 제거시 유용.

 

componentDidMount() 와 componentWillUnmount()메소드는

리액트 컴포넌트와 자른 Javascipt API를 통합해주는 매커니즘.

componentDidMout() : 메서드에서 초기화

componentWillUnmout() : 메서드에서 해제

 

이런 컴포넌트 생명주기 API를 통해 외부 라이브러리와 리액트에서 render()하는 DOM과 싱크를 맞출 수 있습니다.

 

업데이트 단계 

컴포넌트 업데이트는 props/state 변화에 따라 결정됩니다.

컴포넌트 업데이트 단계의 속하는 5가지 생명주기 메서드

 

componentWillReceiveProps()  ->  shouldComponentUpdate()  ->  componentWillUpdate()  ->  render()                -> componentDidUpdate()

 

componentWillReceiveProps(nextProps) - deprecated됨! 

컴포넌트 업데이트 단계서 가장 먼저 실행. 부모 컴포넌트에게서 새로운 props를 받을 때 호출 (부모 -> 자식)

이 메서드 안에서 state가 props에 따라 변하는 로직을 작성. 

 

 <현재 프로퍼티(this.props객체) - 다음 프로퍼티(nextProps)>로 비교할 수 있습니다. 비교를 통해 this.setState()로 컴포넌트 상태를 업데이트 할 수 있는데, 추가적인 렌더링은 발생하지 않습니다.

 *this.props 는 업데이트 전 상태

 *UNSAFE_componenetWillMount() 로 사용할 수 있고 getDerivedStateFromPros()로 대체되었습니다.

 

static getDerivedStateFromPros( nextProps, prevState )

 (주의) 이 메서드에서는 setState로 상태 업데이트 하지 않습니다!

특정 props가 변경될 때 설정하고, 설정할 state값을 return하도록 사용합니다

static getDerivedStateFromProps(nextProps, prevState){
	if(nextProps.value !== prevState.value){
    	return {value:nextProps.value}
    }
    return null // 업데이트 될  것이 따로 없으면 null!!
}

 

shouldComponentUpdate( nextProps, nextState ) 

이 메서드에서는 true나 false 값을 리턴해야합니다. 결과로 Componenet의 업데이트 여부(렌더링)를 결정합니다.

"부모 Component가 렌더링 되면, 거기 물려 있는 자식 Component들도 렌더링( render()호출 )됩니다. 엄청 많은 자식 Component가 렌더링 되면 CPU의 불필요한 사용이 있을 수도 있습니다"

 따라서, 가상DOM의 불필요한 리렌더링을 피하기 위해 해당 메서드를  false로 줘서 해당 조건에 render()를 호출하지 않습니다.

 

componentWillUpdate( nextProps, nextState )

렌더링 직전에 호출됩니다. 

shouldComponentUpdate()에서 true 반환할 때만 호출 false일 때면 호출X.

주로 Animation효과 / 이벤트 리스터를 없애는 작업을 합니다.

 

componentDidUpdate( prevProps, prevState, snapshot )

렌더링 후 호출됩니다.

이 시점에서 this.props와 this.state가 변경되 있습니다.

Parameter로 이전 값인 prevProps/prevState를 조회할 수 있습니다.

getSnapshotBeforeUpdate()에서 return한 snapshot의 값은 세번 째 값으로 받아옴

 

 

 

참고  

React-16-Essentials-Second-Edition

https://velopert.com/3631