TIL_React의 LifeCycle API?

TIL(Today I learned) 을 기록하는 공간입니다.

잘못된 내용 또는 부족한 내용에 대한 수정 및 지적 환영합니다. 

---

https://velopert.com/3631

누구든지 하는 리액트 5편: LifeCycle API | VELOPERT.LOG

LifeCycle API란, 컴포넌트가 브라우저에서 생성, 소멸, 갱신 될때 호출되는 API!

 

*컴포넌트 생성

1. constructor

- 컴포넌트 생성자 함수

- 컴포넌트가 새로 만들어질 때마다 호출된다.

 

2. componentWillMount

- 컴포넌트가 화면에 나타나기 전에 호출되는 API

- v16.3이후로 deprecated 되었음.

- UNSAFE_componentWillMount() 또는 componentDidMount로 대체

 

3. componentDidMount

- 컴포넌트가 화면에 나타나게 되었을 때 호출되는 API

- 외부 라이브러리 연동 및 데이터 요청

- 또는DOM에 관련된 작업 수행시 사용

 

 

*컴포넌트 갱신

1. componentWillReceiveProps

- 새로운 props를 받게 되었을 때 호출되는 API

- state가 props에 따라 변해야하는 로직을 작성할 때!

- v16.3부터 deprecated

- UNSAFE_componentWillReceiveProps() 또는 getDerivedStateFromProps로 대체

 

2. static getDerivedStateFromProps()

- props로 받아온 값을 state로 동기화 하는 작업을 가는 경우 사용

 

3.shouldComponentUpdate

- 컴포넌트 최적화 작업에서 유용하게 사용되는 API

- return 값이 true일때만 다음 작업 (렌더링) 실행 

- false인 경우 render() 실행 불가

- 불필요하게 virtual DOM에 렌더링 하게 되는 경우를 줄이기 위해!

 

4.componentWillUpdate

- shouldComponentUpdate에서 true를 받아야 호출 가능

-애니메이션 효과를 초기화, 또는 이벤트 리스너 삭제의 역할

- 이 이후 render()가 호출된다.

- v16.3 이후 deprecated, getSnapshotBeforeUpdate로 대체

 

5. getSnapshotBeforeUpdate

- DOM 변화가 일어나기 직전의 DOM 상태를 가져온다.

 

6. componentDidUpate

- render()를 호출하고 다음에 발생하는 API

- this.props와 states는 바뀌어있는 상태!

- preProps 또는 preState를 통하여 과거의 값 조회 가능

- 세번째 매개변수로 getSnapshotBeforeUpdate의 return 값

 

 

*컴포넌트 삭제

1. componentWillUnmount

- 등록했던 이벤트를 제거, setTimeout 제거, 외부 라이브러리 dispose

 

*컴포넌트 에러

1. componentDidCatch

- 에러가 발생했을 때, 에러 처리하는 부분!

- render 함수에서의 에러는 문제가 없으나,

자식 컴포넌트 내부에서 발생하는 에러는 처리할 수 없음!