반응형
LifeCycle API
- 이 API 는 컴포넌트가 브라우저에서 나타날때, 사라질때, 그리고 업데이트 될 때, 호출되는 API 이다.
컴포넌트 초기 생성
컴포넌트가 브라우저에 나타나기 전, 후에 호출되는 API 들이 있다.
constructor
constructor(props) {
super(props);
}
- 컴포넌트 생성자 함수이다. 컴포넌트가 새로 만들어질 때마다 이 함수가 호출한다.
componentDidMount
componentDidMount() {
// 외부 라이브러리 연동: D3, masonry, etc
// 컴포넌트에서 필요한 데이터 요청: Ajax, GraphQL, etc
// DOM 에 관련된 작업: 스크롤 설정, 크기 읽어오기 등
}
- 이 API는 컴포넌트가 화면에 나타나게 됐을 때 호출된다.
- 여기선 주로 D3, masonry 처럼 DOM 을 사용해야하는 외부 라이브러리 연동을 하거나, 해당 컴포넌트에서 필요로하는 데이터를 요청하기 위해 axios, fetch 등을 통하여 ajax 요청을 하거나, DOM 의 속성을 읽거나 직접 변경하는 작업을 진행한다.
컴포넌트 업데이트
컴포넌트가 업데이트는 props 의 변화, 그리고 state 의 변화에 따라 결정된다. 업데이트가 되기 전과 그리고 된 후에 호출되는 API가 존재한다.
static getDerivedStateFromProps()
static getDerivedStateFromProps(nextProps, prevState) {
// 여기서는 setState 를 하는 것이 아니라
// 특정 props 가 바뀔 때 설정하고 설정하고 싶은 state 값을 리턴하는 형태로
// 사용된다.
/*
if (nextProps.value !== prevState.value) {
return { value: nextProps.value };
}
return null; // null 을 리턴하면 따로 업데이트 할 것은 없다라는 의미
*/
}
- 이 API 는 props 로 받아온 값을 state 로 동기화 하는 작업을 해줘야 하는 경우에 사용된다.
shouldComponentUpdate
shouldComponentUpdate(nextProps, nextState) {
// return false 하면 업데이트를 안함
// return this.props.checked !== nextProps.checked
return true;
}
- 이 API 는 컴포넌트를 최적화하는 작업에서 매우 유용하게 사용된다.
- 변화가 발생한 부분만 감지해내기 위해서는 Virtual DOM 에 한번 그려줘야하는데 즉, 현재 컴포넌트의 상태가 업데이트되지 않아도, 부모 컴포넌트가 리렌더링되면, 자식 컴포넌트들도 렌더링 된느 낭비를 보인다.
- 이렇게 쓸대없이 낭비되고 있는 이 CPU 처리량을 줄여주기 위해서 Virtual DOM 에 리렌더링 하는것도, 불필요할 경우엔 방지하기 위해서 shouldComponentUpdate 를 작성한다.
- 이 함수는 기본적으로 true 를 반환한다. 따로 작성을 해주어서 조건에 따라 false 를 반환하면 해당 조건에는 render 함수를 호출하지 않는다.
getSnapshotBeforeUpdate()
- render()
- getSnapshotBeforeUpdate()
- 실제 DOM 에 변화 발생
- componentDidUpdate
이 API를 통해서, DOM 변화가 일어나기 직전의 DOM 상태를 가져오고, 여기서 리턴하는 값은 componentDidUpdate 에서 3번째 파라미터로 받아올 수 있게 된다.
componentDidUpdate
- 이 API는 컴포넌트에서 render() 를 호출하고난 다음에 발생하게 된다.
- 이 시점에선 this.props 와 this.state 가 바뀌어있습니다. 그리고 파라미터를 통해 이전의 값인 prevProps 와 prevState 를 조회 할 수 있다.
- 그리고, getSnapshotBeforeUpdate 에서 반환한 snapshot 값은 세번째 값으로 받아온다.
getSnapshotBeforeUpdate()
getSnapshotBeforeUpdate(prevProps, prevState) {
// 여기는 DOM 업데이트가 일어나기 직전의 시점이다.
// 새 데이터가 상단에 추가되어도 스크롤바를 유지해보게 하기 위함이다.
// scrollHeight 는 전 후를 비교해서 스크롤 위치를 설정하기 위함이고,
// scrollTop 은, 이 기능이 크롬에 이미 구현이 되어있는데,
// 이미 구현이 되어있다면 처리하지 않도록 하기 위함이다.
if (prevState.array !== this.state.array) {
const {
scrollTop, scrollHeight
} = this.list;
// 여기서 반환 하는 값은 componentDidMount 에서 snapshot 값으로 받아올 수 있다.
return {
scrollTop, scrollHeight
};
}
}
componentDidUpdate(prevProps, prevState, snapshot) {
if (snapshot) {
const { scrollTop } = this.list;
if (scrollTop !== snapshot.scrollTop) return; // 기능이 이미 구현되어있다면 처리하지 않는다.
const diff = this.list.scrollHeight - snapshot.scrollHeight;
this.list.scrollTop += diff;
}
}
컴포넌트 제거
컴포넌트가 더 이상 필요하지 않게 되면 단 하나의 API 가 호출된다.
componentWillUnmount
componentWillUnmount() {
// 이벤트, setTimeout, 외부 라이브러리 인스턴스 제거
}
- 여기서는 주로 등록했었던 이벤트를 제거하고, 만약에 setTimeout 을 걸은것이 있다면 clearTimeout 을 통하여 제거를 한다.
- 추가적으로, 외부 라이브러리를 사용한게 있고 해당 라이브러리에 dispose 기능이 있다면 여기서 호출해주면 된다.
- 즉 컴포넌트가 삭제되거나 사라질때 시점에 호출하고 싶은 것을 넣어주면 발동하는 함수이다.
컴포넌트에 에러 발생
render 함수에서 에러가 발생한다면, 리액트 앱이 크래쉬 되어버리는데 그러한 상황에 유용하게 사용 할 수 있는 API 가 한가지 있다.
componentDidCatch
componentDidCatch(error, info) {
this.setState({
error: true
});
}
- 에러가 발생하면 이런식으로 componentDidCatch가 실행되게 하고, state.error 를 true 로 설정하게 하고, render 함수쪽에서 이에 따라 에러를 띄워주면 된다.
- 이 API 를 사용하시게 될 때 주의할 점이 있는데, 컴포넌트 자신의 render 함수에서 에러가 발생해버리는것은 잡아낼 수는 없지만, 그 대신에 컴포넌트의 자식 컴포넌트 내부에서 발생하는 에러들을 잡아낼 수 있다.
예시 코드
import React, { Component } from 'react';
const Promblematic = () => {
throw (new Error('버그가 나타났다!'));
return (
<div>
</div>
);
};
class Counter extends Component {
state = {
number: 0,
error: false
}
// (...)
componentDidCatch(error, info) {
this.setState({
error: true
});
}
render() {
if (this.state.error) return (<h1>에러발생!</h1>);
return (
<div>
<h1>카운터</h1>
<div>값: {this.state.number}</div>
{ this.state.number === 4 && <Promblematic /> }
<button onClick={this.handleIncrease}>+</button>
<button onClick={this.handleDecrease}>-</button>
</div>
);
}
}
export default Counter;
- 카운터를 4로 올리면 개발자 화면으로 인하여 빨간 에러창이 뜨게 되지만. X 를 눌렀을 때, 앱이 크래쉬되는 것이 아니라 에러가 발생했다는 메시지가 뜨게 된다.
- Problematic은 렌더링이 될 때 에러가 발생했음을 알리는 throw 를 사용하여 개발자 화면의 빨간 에러창에서 표시된다.
반응형
'프로그래밍 개발 > ReactJs' 카테고리의 다른 글
ReactJs - 배열을 다루는 CRUD 구현 (0) | 2021.01.07 |
---|---|
ReactJs - input (0) | 2021.01.06 |
ReactJs - props 와 state (0) | 2021.01.05 |
ReactJs - JSX 기본 (0) | 2021.01.05 |
ReactJs - Update , Delete기능 구현하기 (0) | 2021.01.04 |
댓글