라이프사이클 ♺

모든 리액트 컴포넌트에는 라이프사이클(수명 주기)이 존재한다. 컴포넌트의 수명은 페이지가 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝난다.

프로젝트 진행 시 가끔 컴포넌트를 처음 랜더링할 때 어떤 작업을 처리해야하거나 컴포넌트를 업데이트하기 전후로 어떤 작업을 처리해야 할 수도 있고, 또 불필요한 업데이트를 방지해야 할 수도 있다.

이떄 컴포넌트의 라이프사이클 메서드를 사용한다.

참고로 라이프사이클 메서드는 클래스형 컴포넌트에서만 사용할 수 있다.
함수형 컴포넌트에서는 사용할 수 없고 그 대신에 Hooks 기능을 사용하여 비슷한 작업을 처리한다.

라이프 사이클 멧서드의 종류는 아래와 같이 총 아홉가지이다.

Will접두사가 붙은 메서드는 어떤 작업을 작동하기 전에 실행되는 메서드 이고,
Did접두사가 붙은 메서드는 어떤 작업을 작동하기 후에 실행되는 메서드 이다.

이 메서드들을 우리가 컴포넌트 클래스에서 덮어 써 선언함으로써 사용할 수 있다.

라이프사이클은 총 세가지 즉 마운트, 업데이트, 언마운트 카테고리로 나눈다.

📍 마운트

DOM이 생성되고 웹 브라우저상에 나타나는 것이 마운트(mount)

Method	Description
constructor	컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드 초기 state를 정할 수 있다.
getDerivedStateFromProps	props에 있는 값을 state에 넣을 때 사용하는 메서드 props로 받아온 값을 state에 동기화시키는 용도로 사용
render	우리가 준비한 UI를 랜더링하는 메서드
componentDidMount	컴포넌트가 웹 브라우저상에 나타난 후 호출하는 메서드 컴포넌트를 만들고 첫 헨더링을 다 마친 후 실행 최초 한 번 실행 이 안에서 다른 JS라이브러리 또는 프레임워크의 함수를 호출하거나 이벤트 등록, setTimeout, setInterval, 네트워크 요청 같은 비동기 작업을 처리하면 된다.

📍 업데이트

컴포넌트가 다음의 경우에 업데이트한다.

• props가 바뀔 때
• state가 바뀔 때
• 부모 컴포넌트가 리렌더링될 때
• This.forceUpdate로 강제로 렌더링을 트리거할 때

Method	Description
getDerivedStateFromProps	이 메서드는 마운트 과정에서도 호출되며, 업데이트가 시작되기 전에도 호출된다. props의 변화에 따라 state값에도 변화를 주고 싶을 때 사용한다.
shouldComponentUpdate	컴포넌트가 리렌더링을 해야 할지 말아야 할지를 결정하는 메서드 이 메서드는 true또는 false값을 반환해야 하며, true를 반환하면 다음 라이프사이클이 계속 실행되고, false를 반환하면 작업을 중지한다. 즉 컴포넌트가 리렌더링 되지않는다. 만약 특정함수에서 This.forceUpdate()함수를 호출한다면 이 과정을 생략하고 바로 render함수를 호출한다.
render	컴포넌트를 리렌더링한다. 라이프사이클 중 유일한 필수 메서드
getSnapshotBeforeUpdate	컴포넌트 변화를 DOM에 반영하기 바로 직전에 호출하는 메서드
componentDidUpdate	컴포넌트의 업데이트 작업이 끝난 후 호출하는 메서드

📍 언마운트

마운트의 반대 과정, 즉 컴포넌트를 DOM에서 제거하는 것이 언마운트(unmount)

Method	Description
componentWillUnmount	컴포넌트가 웹 브라우저상에서 사라지기 전에 호출하는 메서드

라이프사이클 메서드는 컴포넌트 상태에 변화가 있을 때마다 실행하는 메서드입니다.이 메서드들은 서드파이 라이브러리를 사용하거나 DOM을 직접 건드려야 하는 상황에서 유용하다. 추가로 컴포넌트 업데이트의 성능을 개선할 때는 shouldComponentdate가 중요하게 사용된다.

각 메서드 설명은 추가적으로 하겠다.