리액트의 LifeCycle API
👉 constructor
이 API는 컴포넌트의 생성자 함수로써 새로운 컴포넌트가 생성될 때마다 호출된다.
👉 componentDidMount
이 API는 컴포넌트가 생성되고 화면에 출력을 완료한 이후에 호출된다.
주로 다음과 같은 경우에 사용된다.
DOM을 사용해야하는 외부 라이브러리를 연동할 때
DOM의 속성을 읽거나 변경해야 할 때
컴포넌트에서 필요한 데이터를 요청하기 위해서 axios, fetch등을 통해 ajax요청을 할 때
UpDating
👉 getDerivedStateFromProps
이 API는 매개변수로 nextProps(props로 받은 값)과 prevState(현재 state의 값)를 받으며 props로 받아온 값을 state로 동기화 해야할 경우에 사용된다.
👉 shouldComponentUpdate
먼저 컴포넌트는 현재 컴포넌트의 상태가 변경되지 않더라도 부모 컴포넌트가 리렌더링되면 자식 컴포넌트들도 무조건 렌더링된다. 또한 렌더링된다는 것은 render 함수가 실행된다는 것이다.
이 때, 이 API는 true(default)를 반환하면 해당 컴포넌트의 reder 함수를 호출하고 false를 반환하면 호출하지 않는데 이 방식으로써 특정 컴포넌트가 리렌더링될 때 발생하는 불필요한 렌더링을 제어할 수 있도록함으로 성능의 낭비를 줄일 수 있다. 즉, 컴포넌트를 최적화할 수 있는 것이다.
👉 getSnapshotBeforeUpdate
이 API는 render 함수의 실행되고 DOM의 변화가 발생하기 전에 호출된다. 이를 통해서 DOM의 변화 이전의 상태를 가져와서 여기서 리턴하는 값을 componentDidUpdate의 3번 째 파라미터로 받아 올 수 있도록 한다.
👉 componentDidUpdate
이 API는 render 함수가 실행되고 DOM이 변화된 이후에 호출된다. 이 시점에는 prevProps와 prevState는 변경되었고 이전 값을 사용하기 위해서 snapshot으로 getSnapshotBeforeUpdated에서 반환된 값을 받아 올 수 있다.
Unmounting
👉 componentWillUnmount
이 API는 더이상 컴포넌트를 사용하지 않게 될 때 호출된다. 주로 등록했었던 이벤트를 제거하거나, 만약에 setTimeout 을 걸은것이 있다면 clearTimeout 을 통하여 제거한다. 추가적으로, 외부 라이브러리를 사용한 것이 있고 해당 라이브러리에 dispose 기능이 있다면 여기서 호출하면된다.
Error
👉 componentDidCatch
React는 render 함수에서 에러가 발생하면 동작을 하지 않기 때문에 이 API는 에러를 제어하기 위해서 사용한다. 추가적으로 이 API는 컴포넌트 자신의 render 함수에서 에러가 발생해버리는것은 잡아낼 수는 없고 컴포넌트의 자식 컴포넌트 내부의 에러들을 잡아낼 수 있다.
