[REACT] 컴포넌트 생명주기

render
 - shouldComponentUpdate가 false를 리턴함으로써 업데이트 작업을 건너 뛰지만 않는다면,
 render 메서드가 다시 호출됨으로써 컴포넌트가 올바로 보이게 보장한다.

>> 생명주기 메소드와의 만남

 - 컴포넌트의 일생에서 다양한 시점에 호출되는 이벤트 핸들러라고 생각하면된다.

 

>> componentWillMount

>> componentDidMount

>> componentWillUnMount

>> componentWillUpdate

>. componentDidUpdate

>> shouldComponentUpdate

>> componentWillReceiverProps

>> componentDidCatch

 + 생명주기 메소드와 함께 자주 사용할 하나의 메소드가 더있다. 바로 render 메소드이다.

 

 

1. 초기 렌더링 단계

 - 컴포넌트가 삶을 시작하고 DOM으로 가는 길을 걷는 중에는 다음과 같은 생명주기 메소드들이 호출된다.

  1) 기본 속성 설정

  2) 기본 상태 설정

  3) componentWillMount

  4) render

  5) componentDidMount

 

 >> 기본 속성 설정

   - 컴포넌트의 defaultProps 속성은 this.props의 기본 값을 지정할 수 있게 해준다. 예컨대 CounterParent 컴포넌트의 name 속성을 설정하려면 다음과 같이 하면 된다.

   CounterParent.defaultProps = {

              name : "Iron Man"

    }

   - 이는 컴포넌트가 생성되기 전이나 부모로부터 속성이 전달될 때 실행된다.

 

>> 기본 상태 설정

 - 이단계는 컴포넌트의 생성자 안에서 진행된다. 따라서 컴포넌트 생성과정에서
 - this.state의 기본 값을 지정할수 있는 기회다.
 
 constructor(props){
 	super(props);
    
    console.log("constructor : Default state time");
    
    this.state = {
    	count : 0
    }
 }
 
 - 보다시피 여기서는 state 객체를 정의 했고, 그 count 속성을 0 으로 초기화 했다.

 

componentWillMount

 - 컴포넌트가 DOM 안으로 렌더링 되기 전에 호출되는 마지막 메소드이다.
 - 여기서 중요한 사항이 있는데. 이 메소드 안에서는 
 - setState를 호출해도 컴포넌트가 다시 렌더링 되지 않는다

render
 - 모든 컴포넌트에 정의돼 있어야 하는 메소드이며, JSX를 리턴하는 책임을 진다.
 - 렌더링이 필요없다면  단순히 null, false를 리턴하면된다.

componentDidMount
 - 컴포넌트가 랜더링돼 DOM에 자리 잡은 직후 호출된다. 이 시점에서는 컴포넌트 생성이 완료 됬는지 
 - 여부를 걱정할 필요 없이, 안심하고 DOM 쿼리 작업을 수행하면 된다.
 - 모든 준비를 마친 컴포넌트에만 의존하는 코드는 모두 이메소드 안에 지정하면 된다.
 
 * render 메소드를 제외하면 지금까지의 모든 생명주기 메소드들은 한번만 실행된다.

 

>> 업데이트 단계

 - 컴포넌트가 DOM 안으로 추가되면, 이후에 속성이나 상태가 변경될 때 업데이트되며 다시 렌더링 된다. 이 과정에서 또

 다른 생명주기 메소드 들이 호출된다.

 

2. 상태 변경 다루기

 - 먼저 상태 변경에 대해 알아보자. 상태가 변경되면 컴포넌트는 render 메소드를 다시 호출한다.

 그 컴포넌트의 결과에 의존하는 다른 모든 컴포넌트 역시 자신들의 render 메소드를 호출한다.

 - 상태 변경됬을 때 호출되는 모든 생명주기 메소드를 보여준다.

  >> shouldComponentUpdate

  >> componentWillUpdate

  >> render

  >> componentDidUpdate

shouldCompoentUpdate
 - 때로는 상태가 변경됬어도 컴포넌트의 업데이트를 바라지 않을 수 있다.
 - 이 메소드는 그와 같은 업데이트 여부를 제어할 수 있게 해준다
 - 만약 true를 리턴하면 컴포넌트는 업데이트 되고, false를 리턴하면 업데이트를 건너 뛴다.
 
 shouldComponentUpdate(newPorps, newState){
 	console.log("shouldComponentUpdate : Should component update?")
   
   if(newState.count <5){
   	console.log("shouldComponentUpdate : Component should Update !!")
    return true;
   }
   else
   {
   	ReactDOM.ummountComponentAtNode(destination);
    console.log("shouldComponentUpdate : Component should not Update !");
    return false;
   }
 }
 
 - 이메소드는 newPorps 와 newState 두 인자를 받는다.
 - 여기서 상태 속성인 id의 값이 5보다 작은지 확인한다.
 - 만약 그렇다면 true를 리턴해 컴포넌트가 업데이트 되야 함을 지시, false라면 업데이트를 거부

 componentWillUpdate
 
  - 이 메소드는 컴포넌트가 업데이트 되기 직전에 호출된다. 크게 주목 할만한건 없지만,
  이 메소드 안에서는 this.setState를 사용해 상태를 변경할 수 없다.

render
 - shouldComponentUpdate가 false를 리턴함으로써 업데이트를 건너뛰지만 않는다면,
 render 메서드가 다시 호출되므로써 컴포넌트가 올바로 보이게 보장한다.

componentDidUpdate
 - 이메소드는 컴포넌트가 업데이트 되고 render 메서드의 실행이 끝난 후에 호출된다.
 업데이트 후에 수행하고 싶은 코드가 있다면, 이 메서드가 알맞은 장소이다.

 

>> 속성 변경 다루기

 - 컴포넌트가 업데이트되는 또 다른 경우는 DOM 안으로 렌더링 된 후에 속성 값이 변경될 때 이다.

 - 속성 변경시 호출되는 생명주기 메서드들을 봐보자

 

 >> componentWillReceivePorps

 >> shouldComponentUpdate

 >> componentWillUpdate

 >> render

 >> componentDidUpdate

componentWillReceiveProps 
 - 이 메소드는 하나의 인자를 받는데, 그 인자에는 새로 할당하고자 하는 속성 값이 포함된다.

 

>> 언마운트 단계

 - 컴포넌트가 소멸되고 DOM에서 제거되는 언마운트 단계다.

componentWillUnmount
 - 메소드에서 이벤트 리스너를 제거하거나, 타이머를 중단시키는 등의 뒷정리를 할 수 있다.
 - 이메서드가 실행된 후 컴포넌트는 실제로 DOM으로 부터 제거된다.