LifeCycle API (Section 5)

참고> velopert.com/3631

 

1. LifeCycle API: 컴포넌트가 사용자의 브라우저에서 나타날 때, 사라질 때, 업데이트 될 때 호출되는 API
-> 옴총 중요!!

2. componentWillMount : 컴포넌트가 새로 만들어질 때마다 호출됨
-> 이 API는 컴포넌트가 사용자의 화면에 나가기 직전에 호출됨
-> 이 API는 크게 신경쓰지 않아도 됨
-> 원래 서버측 JavaScript에서 썼었는데 React v16.3에서는 이 API가 deprecated됨
-> React v16.3 이후부터는 UNSAFE_componentWillMount() 라는 이름으로 사용됨

3. componentDidMount
-> 컴포넌트가 사용자의 화면에 나타나게 됐을 때 호출됨
-> DOM을 사용해야 하는 외부 라이브러리 연동을 하거나, ajax 요청을 하거나, DOM의 속성을 읽거나 직접 변경하는 작업을 진행

4. 컴포넌트 업데이트 : props의 변화와 state의 변화가 결정함

5. componentWillReceiveProps
-> 이 API는 컴포넌트가 새로운 props를 받게 됐을 때 호출
-> 이 함수에서는 주로 state가 props에 따라 변해야 하는 로직을 작성
-> 파라미터로 오는 nextProps가 바뀔 props이고,  this.props를 하면 아직 바뀌기 전의 props를 참조함
-> 이 API도 React v16.3 이후로 deprecated됨
-> React v16.3 이후부터는 UNSAFE_componentWillReceiveProps() 으로 사용
-> 이 기능은 상황에 따라 getDerivedStateFromProps 함수로 대체될 수 있음

6. static getDerivedStateFromProps
-> React v16.3 이후로 만들어진 LifeCycle API
-> props로 받아온 값을 state로 동기화하는 작업을 해줌.

7. shouldComponentUpdate
-> 불필요한 렌더링을 방지하는 조건을 작성

8. componentWillUpdate
-> 주로 애니메이션 효과를 초기화하거나, 이벤트 리스너를 없애는 작업을 함.
-> 이 함수가 호출되고 나면 render() 함수가 호출됨
-> React v16.3 이후 deprecated 됨
-> 기존 기능은 getSnapshotBeforeUpdate로 대체될 수 있음

9.  API 발생 시점
1) render()
2) getSnapshotBeforeUpdate()
3) 실제 DOM에 변화 발생
4) componentDidUpdate

10. getSnapshotBeforeUpdate
-> 이 API는 DOM 변화가 일어나기 직전의 DOM 상태를 가져오고, 여기서 리턴하는 값은
componentDidUpdate 에서 세번째 파라미터로 받아올 수 있음

11. componentDidUpdate
-> 이 API는 컴포넌트에서 render()를 호출하고 난 다음에 발생
-> 여기선 이미 this.props와 this.state가 바뀌어져 있는 상태
-> 파라미터로 전달된 prevProps와 prevState로 이전의 props와 state를 조회할 수 있음
-> getSnapshotBeforeUpdate의 리턴값은 세번째 파라미터인 snapshot으로 전달됨

12. componentWillUnmount
-> 컴포넌트가 더 이상 필요하지 않게 되면 여기서 주로 등록했었던 이벤트를 제거하고, 
setTimeout을 걸어놓은 게 있다면 clearTimeout을 통해 제거함
-> 이 컴포넌트에서 사용한 외부라이브러리가 dispose 기능을 제공한다면 여기서 호출하면 됨

13. componentDidCatch
-> render() 함수에서 에러가 나면 React 앱은 crash되버림. 이 상황을 컨트롤하기 위해 사용하는 API
-> 컴포넌트 자신의 render 함수에서 발생하는 에러는 잡아낼 수 없지나, 대신 자식 컴포넌트의 내부에서 발생하는 에러는 잡아낼 수 있음.

14. 보통, 렌더링 부분에서 오류가 발생하는 건 사전에 방지해야 함.

15. 주로 렌더링 중 에러가 발생하는 이유
1) 존재하지 않는 함수 호출
2) 배열이나 객체를 참조하려는데 없는 경우

-> 이 경우들은 render 함수의 초입에서 validation 체크로 막아주는 게 좋음. 이것과 더불어 추가적인 에러들은 componentDidCatch 함수에서 잡아주는 작업이 필요함.