React componentWillMount , ComponentDidMount 메소드

리액트 js 컴포넌트에는 lifeCycle API 라는 것이 있다.

lifeCycle API 에서 제공하는 함수 목록

Mounting Cycle

constructor (object props)

componentWillMount()

render() -> React Element

componentDidMount()

Updating Cycle

componentWillReceiveProps(object nextProps)

shouldComponentUpdate(object nextProps, object nextState)

componentWillUpdate(object nextProps , object nextState)

render() -> React Element

componentDidUpdate(object prevProps, object prevState)

lifeCycle API 는 컴포넌트가 DOM 위에 생성되기 전 후 및 데이터가 변경되어 상태를 업데이트 하기 전 후로 실행되는 메소드이다.

쉽게 말하면.

firebase 실시간 데이터 베이스를 사용하는 상황을 생각해보자.

앱에 따라서 우리는 데이터베이스가 실시간으로 바뀌는 것을 화면으로 보고 싶을 수 있다.

이럴 때 lifeCycle API 의 

DOM 위에 생성되기 전 후 및 데이터가 변경되어 상태를 업데이트 하기 전 후로 실행되는 메소드

이 특징에 따라서.

데이터가 변경되면 메소드가 실행된다.

화면이 나타날 때 메소드가 실행된다.

그러면 lifeCycle API 에 화면에 보여주는 동작을 적는다면?

데이터가 바뀔때마다 화면에 반영 할 수 있다.

채팅 사이트 같은 것에 응용 할 수 있는 것이다.

사용 법을 알아보자.

일단 constructor 를 호출해야 한다.

constructor 는 컴포넌트가 브라우저에 나타나기 전에 호출되는 API 이다.

constructor(props) {

this.state = { messages : [] };

}

constructor 는 컴포넌트 생성자 함수이다.

간단 요약 : 컴포넌트가 새로 만들어질 때마다 호출되는 함수다.

ComponentWillMount

componentWillMount() {

}

이제 componentWillMount 에 대해서 살펴보자.

componentWillMount 는 컴포넌트가 화면에 나타나기 직전에 호출되는 api 이다.

여기에 데이터를 보여주도록 동작을 정의한다면 어떻게 될까.

DB에서 초기 데이터를 화면에 보여주기 좋을 것이다.

componentDidMount

componentDidMount() {

}

이 API는 컴포넌트가 화면에 나타나게 되었을 때 호출된다.

componentWillMount 와 거의 동일하다.

"화면에 나타나기 직전"과 "나타나게 되었을 때"의 차이다.

componentWillReceiveProps

componentWillReceiveProps는 컴포넌트가 새로운 Props 를 받게 되었을 때 호출된다.

state 가 props 에 따라 변해야 하는 로직을 작성할때 쓴다.

componentWillUnMount

컴포넌트가 제거 될 때 호출 된다.

마지막. render 함수에서 에러가 발생 했을때 사용하는 API

try catch 문 같은 거라고 생각하면 된다.

componentDidCatch( error , info ) {

}

에러가 발생하면 실행된다.