App.js
import React, { Component } from "react";
import LifeCycleSample from "./LifeCycleSample";
function getRandomColor() {
return "#" + Math.floor(Math.random() * 16777215).toString(16);
}
class App extends Component {
state = {
color: "#000000",
};
handleClick = () => {
this.setState({
color: getRandomColor(),
});
};
render() {
return (
<div>
<button onClick={this.handleClick}>랜덤색상</button>
<LifeCycleSample color={this.state.color} />
</div>
);
}
}
export default App;
LifeCycleSample.js
import React, { Component } from "react";
class LifeCycleSample extends Component {
state = {
number: 0,
color: null,
};
myRef = null;
constructor(props) {
super(props);
console.log("constructor");
}
static getDerivedStateFromProps(nextProps, prevState) {
console.log("getDerivedStateFromProps");
if (nextProps.color !== prevState.color) {
return { color: nextProps.color };
}
return null;
}
componentDidMount() {
console.log("componentDidMount");
}
shouldComponentUpdate(nextProps, nextState) {
console.log("shouldComponentUpdate", nextProps, nextState);
return nextState.number % 10 !== 4;
}
componentWillUnmount() {
console.log("componentWillUnmount");
}
handleClick = () => {
this.setState({
number: this.state.number + 1,
});
};
getSnapshotBeforeUpdate(prevProps, prevState) {
console.log("getSnapshotBeforeUpdate");
if (prevProps.color !== this.props.color) {
return this.myRef.style.color;
}
return null;
}
componentDidUpdate(prevProps, prevState, snapshot) {
console.log("componentDidUpdate", prevProps, prevState);
if (snapshot) {
console.log("업데이트 직전 색상: ", snapshot);
}
}
render() {
console.log("render");
const style = {
color: this.props.color,
};
return (
<div>
<h1 style={style} ref={(ref) => (this.myRef = ref)}>
{this.state.number}
</h1>
<p>Color: {this.state.color}</p>
<button onClick={this.handleClick}>더하기</button>
</div>
);
}
}
export default LifeCycleSample;
호출되는 메서드 순서
1. constructor
부모 컴포넌트에서 받아온
props
값을 가지고 있다.
props
값은 컴포넌트의state
값에update
되지 않았다 (this.state
의 color 값은 null이다.)
2. getDerivedStateFromProps
해당 메서드를 통해서 props 값을 state에 넣어주게 된다.
nextProps: 받아온 props 값을 가지고 있다.
prevState: 현재 컴포넌트가 가지고 있는 state 값을 가지고 있다.
3. render
렌더링하는 과정에서 값을 세팅해준다.
4. componentDidMount
모든 렌더링 과정이 진행됐을 때 실행된다.
호출되는 메서드 순서
1. getDerivedStateFromProps
부모 컴포넌트에서 랜덤으로 생성된 색상이 업데이트 되면서 props에 새로운 값이 전달된다.
컴포넌트의state
값을props
의 새로운 값으로 업데이트한다.
2. shouldComponentUpdate
nextState.number % 10
의 값이4
이면 리렌더링을 취소하고 나머지는 리렌더링을 진행한다.
3. render
렌더링하는 과정에서 값을 세팅해준다.
4. getSnapshotBeforeupdate
업데이트 직전의 값을 가지고 있다.
새로운 값이 아닌 이전의 값을 가지고 있다. 해당 값은componentDidUpdate
메서드의snapshot
파라미터로 값을 전달할 수 있다.
5. componentDidUpdate
업데이트 이후 호출되는 메서드
이전에 가졌던 값(데이터)에 접근할 수 있다.
호출되는 메서드 순서
1. getDerivedStateFromProps
2. shouldComponentUpdate
3. render
4. getSnapshotBeforeUpdate
5. componentDidUpdate
변경되는 값의 내용만 다르고 호출되는 메서드의 순서는 랜덤색상 버튼을 눌렀을 때와 동일하다.
변환된 값을 보내주는props
값으로 보내주는 것이 아니라 컴포넌트 내부에서 메서드를 통해서 값을update
한다.
호출되는 메서드 순서
1. getDerivedStateFromProps
2. shouldComponentUpdate
shouldComponentUpdate
메서드에서false
가return
되면 리렌더링을 취소한다.
getDerivedStateFromProps
메서드가 실행됐기 때문에state
값은 이미 바뀌어 있다.