[React] LifeCycle API

LifeCycle API 란?

https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

LifeCycle API 는 React에서 생명주기이다 무슨 말이냐면 Component가

1. 나타날 때

2. 업데이트 될 때

3. 사라질 때 

등 중간중간 과정에서 작업을 할 때 사용되기 때문이다.

 

LifeCycle API 의 종류는 매우 많다 (사진 참고)

---

LifeCycle API 종류 소개 (사진 참고)

1. Mounting

: Component가 우리 브라우저 상에 나타날 때

 

2. Updating

: Component의 Props가 바뀌거나 어떤 내용이 바뀌었을 때, 업데이트 될 때

 

3. Unmounting

: Component가 우리 브라우저 상에서 사라질 때

 

4. LifeCycle API 소개

constructor	우리가 만든 함수가 처음 브라우저 상에 나타날 때 가장 먼저 사용되는 함수 초기설정 컴포넌트가 만들어지는 과정에서 미리 먼저 해야 할것을 여기서 사용
getDerivedStateFromProps	Props로 받아온 값을 state로 동기화하는 작업을 함
shouldComponentUpdate	return 값이 false이면 업데이트를 안함
render	어떤 DOM을 만들지, 내부에 태그에는 어떤 값을 전달할지 도와주는 역할을 함
getSnapshotBeforeUpdate	컴포넌트가 업데이트되기 바로 직전에 return 시켜서 return된 값을 componentDidUpdate에서 받아올 수 있음
componentDidUpdate	컴포넌트가 업데이트 된 이후에 호출되는 API로 이전의 값인 prevProps와 prevState 를 조회할 수 있으며 getSnapshotBeforeUpdate에서 반환한 snapshot 값은 세 번째로 받아오는 역할을 함
componentWillUnmount	컴포넌트를 제거할 수 있음
componentDidCatch	에러를 잡아줌
componentDidMount	외부 라이브러리 연동, 컴포넌트에서 필요한 데이터 요청, DOM에 관련된 작업 (스크롤 설정, 크기 읽어오기, 이벤트 등록 등) 을 함

LifeCycle API 참고 문서 코드: https://codesandbox.io/s/xl313zyrkw