[ React ] [Chapter 7] LifeCycle 사용하기
LifeCycle API - Constructor
Constructor는 컴포넌트 초기 생성
컴포넌트가 첨 만들어 질 때 호출 되는 함수
import React, { Component } from 'react';
class App extends Component {
constructor(props) {
super(props);
console.log('itjava')
}
render() {
return (
<div>
<h1>ItJava</h1>
</div>
);
}
}
export default App;
LifeCycle API - componentDidMount
componentDidMount 는 컴포넌트가 화면에 나타날 때 호출 된다.
componentDidMount() {
console.log('itjava2')
}
LifeCycle API - getDerivedStateFromProps()
getDerivedStateFromProps() 버전 16.3 이후로 생긴 API이다
props로 받아온 값을 state로 동기화 하는 작업을 해줘야 하는 경우 사용
일단 props 와 state를 랜더링 해줄 자식 컴포넌트를 만듭니다.
constructor를 쓰던 state {} 를 쓰던 state를 초기화 해주고,
getDerivedStateFromProps를 해줘야 하는데 이건 static으로 선언 해줘야 합니다.
getDerivedStateFromProps 의 nextProps는 다음으로 받아 올 props을 가져 오는거고, prevState는 현재 업데이트 되기전의 state를 가져오는거다
그래서 보면 if로 다음으로 가져올 props랑 업데이트 되기 전의 state가 다르면 state 의 값 value를 다음으로 받아올 props로 변경 시켜주는 로직이다.
App.js 에서는 ItJava.js를 랜더링 해 변화를 줘 본다 그럼 state는 1로 바뀐다.
import React, { Component } from 'react';
class Itjava extends Component {
constructor(props) {
super(props);
this.state = {
value : 0
}
}
static getDerivedStateFromProps(nextProps, prevState) {
if(prevState.value !== nextProps.value) {
return {
value : nextProps.value
}
}
}
render() {
return (
<div>
<h1>props : {this.props.value}</h1>
<h1>state : {this.state.value}</h1>
</div>
);
}
}
export default Itjava;
import React, { Component } from 'react';
import Itjava from './ItJava';
class App extends Component {
render() {
return (
<div>
<h1>Itjva</h1>
<Itjava value={ 1 } />
</div>
);
}
}
export default App;
LifeCycle API - shouldComponentUpdate
shouldComponentUpdate는 컴포넌트를 최적화 하는 작업에서 아주 유용하다.
리액트는 변화가 발생하는 부분만 업데이트를 하는데 이 변화가 발생한 부분만 감지하기 위해서는 Virtual DOM에 한번 그려줘야 한다. 그런데 이런 가상 DOM에 조차 안그려야 할 때 사용 한다. 그러면 성능이 좋아진다.
즉 현재 컴포넌트의 상태가 업데이트 되지 않아도, 부모 컴포넌트가 리렌더링 되면, 자식 컴포넌트들도 렌더링이 된다. 이 작업이 성능에 안좋은 영향을 끼치는건 아니지만, 컴포넌트가 엄청 많이 렌더링이 된다면 말이 달라집니다. 그래서 이 함수로 성능을 최적화 합니다.
이와 같이 하면 다음에 오는 props의 value 값이 10이면 렌더링을 안한다는 로직입니다.
shouldComponentUpdate(nextProps, nextState) {
if(nextProps.value === 10) return false;
return true;
}
LifeCycle API - getSnapshotBeforeUpdate
getSnapshotBeforeUpdate는
DOM 이 변화가 일어나기 직전의 DOM 상태를 가져오고 여기서 리턴 하는 값은 componentDidUpdate에서 3번째 파라미터로 받을 수 있다.
getSnapshotBeforeUpdate(prevProps, prevState) {
console.log(this.it);
}
render() {
return (
<div>
<div
ref={ref => {
this.it = ref;
}}
>
</div>
</div>
);
}
LifeCycle API - componentDidUpdate
componentDidUpdate는 render이 호출 하고 난 다음에 호출 된다. 그렇기 때문에 props와 state는 변경 되어 있다.
그렇기 때문에 해당 props나 state가 바뀌었을 경우 뭘 처리 해야한다 할 때 유용하게 사용됩니다.
또 한 세번째 파라미터는 바로 전에 getSnapshotBeforeUpdate설명 했는데 여기서 리턴 한 값이 이 함수의 3번째 파라미로 들어옵니다.
그래서 예를 들어 getSnapshotBeforeUpdate에서 이전의 DOM의 상태를 리턴해 어떤 DOM이 추가가 되어도 보고 있던 DOM에 스크롤을 맞출 수 있다.
componentDidUpdate(prevProps, prevState, snapshot) {
if(this.props.value !== prevProps.value) {
console.log('바뀜')
}
}
LifeCycle API - componentWillUnmount
componentWillUnmount는 주로 등록 했던 이벤트를 제거하고 만약 setTimeOut이나 외부라이브러리 이벤트를 걸었다면 여기서 제거를 한다.
이렇게 할 경우 버튼 클릭 하다가 카운터가 10이 넘어가면 ItJava 컴포넌트가 사라지고 사라지면서 componentWillUnmount가 호출 된다.
componentWillUnmount() {
console.log('사라짐');
}
render() {
return (
<div>
<h1>Itjva</h1>
{ this.state.count < 10 && <Itjava value={this.state.count} />}
<button onClick={this.handleClick}>click</button>
</div>
);
}
LifeCycle API - componentDidCatch
componentDidCatch는 컴포넌트에 에러가 발생 했을 때 호출 된다.
render 함수에서 에러가 발생하면, 리액트가 크래쉬 되어버린다. 그러한 상황에 유용하게 사용 할 수 있는 API이다
Java로 보면 try{}catch{} 개념인것이다. 돌아가는 개념이랑 로직만 다를 뿐...
에러가 발생하면 componentDidCatch가 호출 된다. 여기서 this.setState 함수(컴포넌트내장함수)를 불러와 state.error를 상태를 변경 해줘야 한다
componentDidCatch는 부모 컴포넌트에 정의를 해야한다
componentDidCatch(error, info) {
console.log(error);
console.log(info);
}
|
관련 글 |
|
|
저의 글을 읽어 주셔서 감사합니다. 오늘도 즐거운 하루 보내세요.
저의 글이 조금이나마 도움이 되셨다면 로그인이 필요 없는 공감♥ 한번 꾸욱 눌러주세요 하하~