본문 바로가기
JavaScript│Node js

React componentWillMount , ComponentDidMount 메소드

by 자유코딩 2018. 11. 9.

리액트 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 ) {


}


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


댓글