[React] LifeCycle API

- 라이프 사이클 API

참고 사이트 : https://twitter.com/dan_abramov/status/981712092611989509

컴포넌트가 나타날때(Mounting), 업데이트(Updating) 될때, 사라질때(Unmounting)

 

constructor

- 생성자 함수, 브라우저에 보여질때 가장 먼저 실행되는 함수 (state설정, 미리 해야할 작업들)

 

getDerivedStateFromProps

- props로 받은 값을 state로 동기화 시키고 싶을 때 사용함

- 

 

shouldComponentUpdate **

- 용도는 버츄얼돔에 랜더링 할지말지 결정하는 함수이다.

- 원래 부모가 리렌더링되면 자식들도 실행되게 되어 있다.

- virtual DOM은 실제 업데이트 된것만 바뀌기 때문에 랜더랑 과정이 빠르다. 

- virtual DOM에 그리는 성능 조차 아끼고 싶을때 사용한다. DOM이 몇백개 몇천개일때 성능최적화를 위해 사용한다.

- true, false 반환

 

render

- 어떤 DOM을 만들게 될지, 태그의 어떤 값을 전달하게 될지 ?

 

componentDidMount

- render를 거쳐 실제로 브라우저에 나타나게 되면 호출된다. 주로 외부라이브러리 사용할때 특정돔에 차트를 그려달라 할 수 있고, ajax요청을 주로 처리 한다. 몇 초뒤에 어떤작업이 일어나게 하고 싶을때도 사용.

- 외부 라이브러리 연동

- DOM에 관한 작업: 스크롤 설정, 크기 읽어오기 등

컴포넌트가 브라우저에 나타나게 된 시점 어떤 작업을 하겠다! 라는 것이다.

 

getSnapshotBeforeUpdate

- render함수가 호출 된 후의 단계

- 즉, 랜더링을 한 결과물이 브라우저에 반영되기 바로 직전에 호출되는 단계

- 랜더링 후 업뎃 전 스크롤의 위치 혹은 해당돔의 크기를 가져오고 싶을때 사용한다.

 

componentDidUpdate

- 작업을 마치고 컴포넌트가 업데이트 되었을때 호출되는 함수이다.

- 이전의 상태와 지금의 상태가 페이지가 바꼈을때 호출 된다.

 

Unmounting

- 설정한 리스너를 없애주는 작업 

 

* 조금 더 공부 해봐야 겠다. 역시 코드보다 개념이 어렵다... ㅜㅜ