[React.js] React.js 6편 LifleCycle1

React.js 6편 LifeCycle1

---

웹페이지가 호출될 때 업데이트될 때 사라질 때 각 그 순간 사이사이에 자기가 함수를 넣어서  어떠한 작업을 하고싶을 때 사용하면 좋다.

라이프 사이클 실행형태

아래와같은 형태로 lifeCycle이 실행된다. 

각종 초반 설정등을 해주고 웹페이지가 처음실행될 때 Mounting

state나 props등의 변화가 필요할때는 updating 

사라질때는 Unmounting이라고한다.

각함수의 역활등에 대해서 설명해보겠다.

Mounting

1. Constructor 

제일 처음 실행되는 함수이며 state나 기본 설정을 할 수 있다. 

2. getDerivedStateFromProps

입력받은 Props를 state에 동기화하고 싶을 때 사용한다.

3. render 

어떤 돔, 태그를 전해줄지 정하고 보내준다. 

4. componentDidMount 

컴포넌트가 나타나는 시점에서 어떠한 작업을 처리해줄 수 있는 곳입니다. 예를들어 어떠한 차트를 그려주겠다나 http, ajax등의 요청도 사용할 수 있다. 

Updating 

1. ShouldComponentUpdate

컴포넌트에 업데이트 되는 성능을 최적화 하기 위해서 사용합니다. 예를들어 가상 DOM에 그려주지 않는거나 합니다. 그리고 True나 False 값을 반환해서 true면 render를 해주고 false면 render를 해주지 않거나 합니다. 

2. getSnapshotBeforUpdate 

scroll의 위치, 해당 돔의 크기 사전에 가져오고 싶다. 사전에 가져오고 싶은 데이터가 있을 때 사용한다.

3.  componentDidUpdate

마지막 상태와 현재의 상태가 다를 때 어떠한 작업을 할 수 있게 정해주는 곳 입니다. 

unMounting

ComponentWillUnmmount

component가 꺼질 때 이벤트 리스닝을 해줄 수 있는 함수이다.