[ React ] 생명주기
@ 궁금
> 영어를 잘봐라
@ 공부
import React from "react";
class Content extends React.Component {
constructor(props) {
super(props);
}
componentWillMount() {
console.log("Component WILL MOUNT!");
}
componentDidMount() {
console.log("Component DID MOUNT!");
}
componentWillReceiveProps(nextProps) {
console.log("Component WILL RECIEVE PROPS!");
}
shouldComponentUpdate(nextProps, nextState) {
return true;
}
componentWillUpdate(nextProps, nextState) {
console.log("Component WILL UPDATE!");
}
componentDidUpdate(prevProps, prevState) {
console.log("Component DID UPDATE!");
}
componentWillUnmount() {
console.log("Component WILL UNMOUNT!");
}
render() {
return (
<div>
<h1>{this.props.sentDigit}</h1>
</div>
);
}
}
export default Content;
constructor
constructor(props){ super(props); }
생성자 메소드로 컴포넌트가 생성될 때 단 한번만 실행된다.
이 메소드에서만 state를 설정할 수 있다.
class Polygon {
constructor(height, width) {
this.name = 'Polygon';
this.height = height;
this.width = width;
}
sayName() {
console.log('Hi, I am a ', this.name + '.');
}
}
class Square extends Polygon {
constructor(length) {
this.height; // 참조오류가 발생합니다. super가 먼저 호출되어야 합니다.
// 여기서, 부모클래스의 생성자함수를 호출하여 높이값을 넘겨줍니다.
// Polygon의 길이와 높이를 넘겨줍니다.
super(length, length);
// 참고: 파생 클래스에서 super() 함수가 먼저 호출되어야
// 'this' 키워드를 사용할 수 있습니다. 그렇지 않을 경우 참조오류가 발생합니다.
this.name = 'Square';
}componentWillMount() : DOM 생성 전
componentWillMount(){ console.log("componentWillMount"); }
React 엘리먼트를 실제 DOM 노드에 추가하기 직전에 호출되는 메소드다.
DOM이 생성되지 않았으므로 DOM을 조작할 수 없고, render가 호출되기 전이기 때문에 setState를 사용해도 render가 호출하지 않는다.
componentDidMount() : DOM 생성 후
componentDidMount(){ console.log("componentDidMount"); }
컴포넌트가 만들어지고 render가 호출된 이후에 호출되는 메소드다.
AJAX나 타이머를 생성하는 코드를 작성하는 부분이다.
componentWillReceiveProps(nextProps) :
componentWillReceiveProps(nextProps){ console.log("componentWillReceiveProps: " + JSON.stringify(nextProps)); }
컴포넌트 생성후에 첫 렌더링을 마친 후 호출되는 메서드다.
컴포넌트가 처음 마운트 되는 시점에서는 호출되지 않는다.
props를 받아서 state를 변경해야 하는 경우 유용하다.
이 메소드 내부에서 setState를 사용해도 추가적인 렌더링이 발생하지 않는다.
shouldComponentUpdate(nextProps, nextState)
shouldComponentUpdate(nextProps, nextState){ console.log("shouldComponentUpdate: " + JSON.stringify(nextProps) + " " + JSON.stringify(nextState)); return true; }
컴포넌트 업데이트 직전에 호출되는 메소드다.
props 또는 state가 변경되었을 때, 재랜더링을 여부를 return 값으로 결정한다.
componentWillUpdate(nextProps, nextState) : update ( state,props 변경 ) 이 되기 직전
componentWillUpdate(nextProps, nextState){ console.log("componentWillUpdate: " + JSON.stringify(nextProps) + " " + JSON.stringify(nextState)); }
shouldComponentUpdate가 불린 이후에 컴포넌트 업데이트 직전에서 호출되는 메소드다.
새로운 props 또는 state가 반영되기 직전 새로운 값들을 받는다.
이 메서드 안에서 this.setState()를 사용하면 무한 루프가 일어나게 되므로 사용하면 안된다.
componentDidUpdate(prevProps, prevState) : 업데이트 직후
componentDidUpdate(prevProps, prevState){ console.log("componentDidUpdate: " + JSON.stringify(prevProps) + " " + JSON.stringify(prevState)); }
컴포넌트 업데이트 직후에 호출되는 메소드다.
componentWillUnmount() : 컴퍼넌트 DOM 에서 삭제된 후
componentWillUnmount(){ console.log("componentWillUnmount"); }
컴포넌트가 소멸된 시점에(DOM에서 삭제된 후) 실행되는 메소드다.
컴포넌트 내부에서 타이머나 비동기 API를 사용하고 있을 때, 이를 제거하기에 유용하다.
React 컴포넌트가 렌더링을 수행하는 시점은 다음과 같습니다.
- Props가 변경되었을 때
- State가 변경되었을 때
- forceUpdate() 를 실행하였을 때
- 부모 컴포넌트가 렌더링되었을 때