- Mount
컴포넌트가 실행 될 때, 'Mount 된다' 라고 표현.
컴포넌트가 시작되면 제일 초기의 작업은
- context, defaultProps, state 저장
- componentWillMount 메소드 호출
- render, 컴포넌트를 DOM에 그린다.
- componentDidMount 호출
- 기본적인 컴포넌트 생성 과정
constructor
constructor(props){
super(props);
}컴포넌트가 처음 만들어 질 때 가장 먼저 실행되는 메소드
componentWillMount
componentWillMount(){
}컴포넌트가 DOM 위에 만들어지기 전에 실행된다,
-
componentWillMount 중 주의할 점
- 현재 Mount 진행 중이므로(DidMount 전이다), props나 state를 변경해서는 안된다.
- 또한 render 단계에 진입하지 않았으므로 DOM에 접근 할 수 없다.
componentDidMount
componentDidMount(){
}컴포넌트가 만들어지고 난 후 render를 거치고 실행되는 메소드.
여기서 javascript framework 연동, setTimeout, setInterval 및 AJAX 처리를 한다.
-
componentDidMount 에서 주의할 점
- render가 되었으므로 DOM에 접근 할 수 있지만, state를 바꾸면 안된다. setState메소드를 사용하면 render 메소드가 다시 실행되기 때문이다. 방금 render를 마친 단계인데, 다시금 render가 실행되면 사용자에게 표시될때 깜박임 등을 유발 할 수 있게 된다.
- Props Update 에 따른 cycle
props가 업데이트 될 때의 사이클,
업데이트 되기 전, 업데이트를 감지 우선 componentWillRecieveProps 메소드 호출.
다음으로 shouldComponentUpdate, componentWillUpdate가 차례로 호출.
업데이트(render)가 완료되면 componentDidUpdate가 실행된다.
여기서 componentDidUpdate는 이미 업데이트 된 상태이다, 따라서 바뀌지 이전의 props에 대한 정보를 가지고 있다.
메소드들의 첫번째 인자로 props에 대한 정보를 가지고 있다.
- componentWillRecieveProps
- shouldComponentUpdate
- componentWillUpdate
- render
- componentDidUpdate
componentWillRecieveProps
componentWillRecieveProps(nextProps){
}컴포넌트가 props를 새로 받았을 때 실행.
prop에 따라 state 를 업데이트 해야 할 때 사용하면 유용하다.
-
componentWillRecieveProps 단계에서 주의 할 점
- setState를 할 때 추가적으로 렌더링 하지 않는다
shouldComponentUpdate
shouldComponentUpdate(nextProps, nextState){
var foo = nextProps !== this.props;
return foo;
}prop 또는 state가 변경되었을때, 다시 render를 할지 결정하는 메소드.
return 값 boolean으로 결정된다.
componentWillUpdate
componentWillUpdate(nextProps, nextState){
}컴포넌트가 업데이트 되기 전에 실행.
-
주의사항
- setState 사용 시 무한 루프 발생
componentDidUpdate
componentDidUpdate(prevProps, prevState){
}render를 마친 후 실행된다.
변경되고 난 후 이므로 변경 전의 prop, state를 가지고 있다.
- State Update 에 따른 cycle
setState를 통해서 state가 업데이트 될 때의 과정.
props update와 과정은 동일하나 componentWillRecieveProps 메소드는 호출되지 않는다.
메소드들의 두번째 인자로 state에 대한 정보를 가지고 있다.
- shouldComponentUpdate
- componentWillUpdate
- render
- componentDidUpdate
- Unmount
Unmount, 컴포넌트가 제거되는 것.
- componentWillUnmount
componentWillUnmount
componentWillUnmount(){
}컴포넌트가 DOM 에서 사라진 후 실행되는 메소드,
연결해두었던 이벤트 리스너를 제거하는 등의 수행을 하게 된다.