리액트 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 는 컴포넌트 생성자 함수이다.
간단 요약 : 컴포넌트가 새로 만들어질 때마다 호출되는 함수다.
ComponentWillMount
이제 componentWillMount 에 대해서 살펴보자.
componentWillMount 는 컴포넌트가 화면에 나타나기 직전에 호출되는 api 이다.
여기에 데이터를 보여주도록 동작을 정의한다면 어떻게 될까.
DB에서 초기 데이터를 화면에 보여주기 좋을 것이다.
componentDidMount
이 API는 컴포넌트가 화면에 나타나게 되었을 때 호출된다.
componentWillMount 와 거의 동일하다.
"화면에 나타나기 직전"과 "나타나게 되었을 때"의 차이다.
componentWillReceiveProps
componentWillReceiveProps는 컴포넌트가 새로운 Props 를 받게 되었을 때 호출된다.
state 가 props 에 따라 변해야 하는 로직을 작성할때 쓴다.
componentWillUnMount
컴포넌트가 제거 될 때 호출 된다.
마지막. render 함수에서 에러가 발생 했을때 사용하는 API
try catch 문 같은 거라고 생각하면 된다.
componentDidCatch( error , info ) {
}
에러가 발생하면 실행된다.
'JavaScript│Node js' 카테고리의 다른 글
node js 간단 mysql 사용 방법 (0) | 2019.02.07 |
---|---|
React Progressive web app 튜토리얼 ( 만들고 , firebase에 배포하기 ) (0) | 2018.11.11 |
리액트 props , state (0) | 2018.11.08 |
react js 살펴보기 (0) | 2018.11.08 |
리액트 앱 만들기 (0) | 2018.11.07 |
댓글