[1-5]컴포넌트 라이프싸이클

ReactJs는 컴포넌트의 상태에 따라 호출되는 여러 메서드를 제공합니다.

라이프싸이클을 잘 알고 있으면 어느 상태에 UI를 업데이트해야하는 지 어느 시점에 종료해야하는 지 등을 알고 활용할 수 있습니다.

컴포넌트 리싸이클은  초기화 , 실행단계, 종료 로  크게 3단계로 구분할 수 있습니다.

1)초기화 

  인트턴스 생성시 다음의 순서로 메소드를 호출한다.

  getDefaultProps() ->  getIniitialState() -> componentWillMount() -> render() -> componentDidMount()

  각각의 메소드의 역할은 아래와 같다.

  getDefaultProps()

  -인스턴트 시점에 딱 한번 호출

  -하나의 값을 모든 인스턴스가 공유

 getInitialState()

 -인스턴스 생성시다마 호출

 -이 시점부터 this.props접근 가능

 componentWillMount()

 - 최초 렌더링 직전 호출

 - render메소드 호출하기전에 호출

 render()

 - 필수 메소드

 - 가상 DOM을 만드는 단계

componentDidMount()

- 실제 dom()에 접근할 수 있는 함수

2)실행단계

   에플리케이션 상태 변경에 따른 실행 단계 메스트는 다음 순으로 호출을 한다.

   componentWillReceiveProps() -> shouldComponetUpdate()  -> componentWillUpdate() -> render() ->

 componentWillReceiveProps()

 - 컴포넌트의 props값이 변경될때 호출

 shouldComponetUpdate() 

- 컴포넌트 랜더링시 최적화를 위해 사용

 componentWillUpdate()

 - 새로운 props와 state가 전달 시 메소드 호출

  componentDidUpdate()

 -렌더링이 끝난 DOM을 변경 할수 있다.  componentDidMount()와 비슷한 기능

3)종료

  수명이 다한 DOM을 분리하는 단계

  componentWillUnmount()

  - 컴포넌트 계층 구조에서 제거하는 단계

  - 이벤트 리스너등을 제거하는 단계

[활용 예제]

-제작 예정입니다.

참조

https://facebook.github.io/react/docs/react-component.html

http://www.slideshare.net/xuanthinh244/starting-with-reactjs

https://www.tutorialspoint.com/reactjs/reactjs_component_life_cycle.htm

https://jsfiddle.net/velopert/ccoj0moe/?utm_source=website&utm_medium=embed&utm_campaign=ccoj0moe