React (Component Life Cycle)

컴포넌트 생명주기 (Component Life Cycle)

 - 컴포넌트가 생성되고 소멸되기까지의 생명 주기를 컴포넌트 라이프 사이클이라 한다

 - 2020/03/01 기준 16.12 Version

1.Mounting

 컴포넌트 실행시 처음 화면을 보여주는 단계

 1-1) constructor()

  - 컴포넌트 생성 시 처음 실행되는 이벤트

  - 주로 기본 State 및 초기 변수를 설정

  - 이벤트 안에 super(props) 선언

 

 1-2) getDerivedStateFromProps(prevProps, prevState)

   - props,state 값이 변할 때 마다 적용 후 렌더링 해주는 이벤트

 

 1-3) render()

    - 실제 화면에 컴포넌트를 보여주는 이벤트 

 1-4) componentDidMount()

    - 렌더링 직후에 화면을 보여주는 이벤트

    - 주로 API로 받은 데이터를 처음에 보여주는 이벤트를 DidMount 이벤트에 설정한다

 

2.Updating

 컴포넌트 내에 Props,State의 변화가 생겼을때의 단계

2-1) getDerivedStateFromPorps(prevProps,nextState)

  - props,state 값이 변할 때 마다 적용 후 렌더링 해주는 이벤트 

2-2) render()

  - 데이터가 바뀐 화면을 보여주는 이벤트

2-3) getSnapshotBeforeUpdate(prevProps, prevState)

   - return 이 DidUpdate 이벤트의 SnapShot 파라미터 변수로 들어간다

2-4) componentDidUpdate(prevProps, prevState, snapshot)

   - 데이터가 변화 된 후 실행되는 이벤트

   - 세번째 파라미터인 snapshot은 getSnapshotBeforeUpdate 에서 return 해준 값이 변수로 들어온다

 

3.UnMounting 

  컴포넌트가 삭제될때 단계

 3-1) componentWillUnMount()

  - 컴포넌트가 실행되지 않을때 해당 컴포넌트를 삭제하는 이벤트