출처: https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
마운트
마운트가 될 때 발생하는 생명주기
- constructor
- getDerivedStateFromProps
- render
- componentDidMount
constructor
constructor(props) {
super(props); //무조건 호출해야 함
console.log("constructor");
}constructor(props) {
super(props);
// 여기서 this.setState()를 호출하면 안 됩니다!
this.state = { counter: 0 };
this.handleClick = this.handleClick.bind(this);
}컴포넌트의 생성자 메소드로서, 컴포넌트가 만들어지면 가장 먼저 실행된다.
getDerivedStateFromProps
static getDerivedStateFromProps(nextProps, prevState) {
console.log("getDerivedStateFromProps");
if (nextProps.color !== prevState.color) {
return { color: nextProps.color };
}
return null;
}props 로 받아온 것을 state 에 넣어주고 싶을 때 사용한다.
다른 생명주기 메소드와 달리 static을 필요로 하고 이 안에서는 this를 조회할 수 없다. 특정 객체를 반환하게 되면 해당 객체 내의 내용들이 컴포넌트의 state로 설정이 된다. 반명 null을 리턴하면 아무 일도 일어나지 않는다.
이 메소드는 컴포넌트가 처음 렌더링 되기 전에도 호출되며, 이후에 리렌더링이 되기 전에도 매번 실행된다. 꼭 필요한 경우는 거의 없다고 한다.
render
컴포넌트를 렌더링하는 메소드
componentDidMount
컴포넌트의 첫번째 렌더링이 마치고 나면 호출되는 메소드이다. 이 메소드가 호출되는 시점에는 만든 컴포넌트가 화면에 나타낸 상태다.
업데이트
- getDerivedStateFromProps
- shouldComponentUpdate
- render
- getSnapshotBeforeUpdate
- componentDidUpdate
getDerivedStateFromProps
props나 state가 바뀌었을 때도 이 메소드가 호출된다.
shouldComponentUpdate
shouldComponentUpdate(nextProps, nextState) {
console.log("shouldComponentUpdate", nextProps, nextState);
// 숫자의 마지막 자리가 4면 리렌더링하지 않습니다
return nextState.number % 10 !== 4;
}컴포넌트가 리렌더링을 할 지 말지 결정하는 메소드이다. 이것도 잘 안 쓴다고 한다.
getSnapshotBeforeUpdate
getSnapshotBeforeUpdate(prevProps, prevState) {
console.log("getSnapshotBeforeUpdate");
if (prevProps.color !== this.props.color) {
return this.myRef.style.color;
}
return null;
}컴포넌트에 변화가 일어나기 직전의 DOM 상태를 가져와서 특정 값을 반환하면 그 다음 발생하게 되는 componentDidUpdate 함수에서 받아와서 사용을 할 수 있다.
getSnapshotBeforeUpdate의 반환값이 componentDidUpdate의 3번째 인자로 들어간다.
componentDidUpdate
componentDidUpdate(prevProps, prevState, snapshot) {
console.log("componentDidUpdate", prevProps, prevState);
if (snapshot) {
console.log("업데이트 되기 직전 색상: ", snapshot);
}
}리렌더링이 마치고, 화면에 원하는 변화가 모두 반영되고 난 뒤 호출되는 메서드이다.(최초 렌더링에서는 호출되지 않는다.)3번째 파라미터로 getSnapshotBeforeUpdate 에서 반환한 값을 조회 할 수 있다.
componentDidUpdate()에서 setState()를 즉시 호출할 수도 있지만, 위의 예시처럼 조건문으로 감싸지 않으면 무한 반복이 발생할 수 있다.
언마운트
componentWillUnmount() {
console.log("componentWillUnmount");
}컴포넌트가 화면에서 사라지기 직전에 호출된다.
참조
