리액트 컴포넌트 라이프 사이클 API
이 포스팅은
VELOPERT 님의 포스팅을 아주많이 참조하였습니다;;
(출처 : https://velopert.com/1130 )
1. 컴포넌트 라이프 사이클 API 순서
컴포넌트를 생성 할 때는
constructor -> componentWillMount -> render -> componentDidMount
순으로 진행됩니다.
컴포넌트를 제거 할 때는 componentWillUnmount 메소드만 실행됩니다.
컴포넌트의 prop이 변경될 때엔
componentWillReceiveProps -> shouldComponentUpdate ->
componentWillUpdate-> render -> componentDidUpdate
순으로 진행됩니다.
state가 변경될 떄엔 props 를 받았을 때 와 비슷하지만 shouldComponentUpdate 부터 시작됩니다.
그림으론 아래와 같이 보시면 됩니다.
2. 각 메소드들이 하는 역할
1) constructor
| constructor(props){ super(props); console.log("constructor"); } |
| constructor(props) { console.log("컨텍트 생성자 시작"); super(props); this.state = { contactData: [ {name: "Abet", phone: "010-0000-00035"}, {name: "Betty", phone: "010-0000-0002"}, {name: "Charlie", phone: "010-0000-0003"}, {name: "David", phone: "010-0000-0004"} ] }; console.log("컨텍트 생성자 끝"); } | cs |
-> 생성자 메소드 입니다. 컴포넌트가 처음 만들어질때 실행되며 이곳에서 기본 state를 정할 수 있습니다.
2) componentWillMount
componentWillMount(){
console.log("componentWillMount");
}
-> 컴포넌트가 DOM 위에 만들어지기 전에 실행 됩니다.
3) render
| render() { return ( <button onClick={this.handleClick.bind(this)}> Remove selected contact </button> ); } | cs |
-> 컴포넌트 렌더링을 담당합니다.
4) componentDidMount
componentDidMount(){
console.log("componentDidMount");
}
-> 컴포넌트가 만들어지고 첫 렌더링을 다 마친 후 실행되는 메소드 입니다.
이 안에서 다른 JS 프레임워크를 연동하거나. setTomeout, setInterval및 Ajax 처리를 넣습니다.
--> https://medium.com/@taeho.leon.kim/javascript-%ED%94%84%EB%A0%88%EC%9E%84%EC%9B%8C%ED%81%AC%EB%93%A4%EC%97%90-%EB%8C%80%ED%95%9C-%EC%9D%B4%EC%95%BC%EA%B8%B0-8fc74fab2140#.8nmyw5gjt
이곳에서는 해당 API가 렌더링을 시잓하는 즉시 실행한다고 이야기 한다. 즉 렌더링이 끝날때까지 기다려주지 않는다고 말이다.
아직 정확히 확인을 해보지 못하였다.
5) componentWillReceiveProps
componentWillReceiveProps(nextProps){
console.log("componentWillReceiveProps: " + JSON.stringify(nextProps));
}
-> 컴포넌트가 prop을 새로 받았을 때 실행 됩니다. porp에 따라 state를 업데이트 해야 할 떄 사용 하면 유용 합니다.
이 안에서 this.setState()를 해도 추가적으로 렌더링 하지 않습니다.
6) shouldComponentUpdate
| shouldComponentUpdate(nextProps, nextState){ console.log("shouldComponentUpdate: " + JSON.stringify(nextProps) + " " + JSON.stringify(nextState)); return true; } |
-> 이전 포스팅에서 사용했던 메소드. prop나 state가 변경 되었을때 리렌더링을 할지 말지 정하는 메소드.
실제로 활용 할때는 필요하는 값을 비교해서 반환하도록 사용 한다. (이전 포스팅 참조)
2017/02/27 - [Yame Programmer/react.js] - [react.js] 변경된 값만 렌더링 되도록 하기 shouldComponentUpdate()
7) componentWillUpdate
componentWillUpdate(nextProps, nextState){
console.log("componentWillUpdate: " + JSON.stringify(nextProps) + " " + JSON.stringify(nextState));
}
-> 컴포넌트가 업데이트 되기 전에 실행된다. 이 메소드 안에서는 this.setState()를 사용하면 안된다. 무한루프에 빠져들어 버린다.
8) componentDidUpdate
| componentDidUpdate(prevProps, prevState){ console.log("componentDidUpdate: " + JSON.stringify(prevProps) + " " + JSON.stringify(prevState)); } |
-> 컴포넌트가 리렌더링을 마친 후 실행된다
9) componentWillUnmount
componentWillUnmount(){
console.log("componentWillUnmount");
}
-> 컴포넌트가 dom 에서 사라진 후 실행되는 메소드
