리액트의 라이프사이클(Life Cycle)에 대해 알아보자
✔️라이프사이클이란?
리액트는 컴포넌트 단위로 개발하게 되는데 이때 각 컴포넌트들은 라이프사이클 즉, 생명주기를 가지고 있다. 생명주기는 생성부터 시작하여 업데이트가 되기도 하며 마지막에는 소멸되는 과정을 거치게 된다. 클래스형 컴포넌트에선 주로 생명주기 메서드를 통해 라이프사이클에 따라 컴포넌트를 조작하는데 이와 달리 함수형 컴포넌트에선 생명주기 메서드가 따로 존재하지 않기 때문에 리액트 훅을 사용하여 생명주기 메서드와 비슷하게 동작하도록 구현한다.
라이프사이클을 생성, 업데이트, 제거 총 세 가지 단계로 나눌 수 있고 각 단계마다 메서드가 존재한다. 총 9가지 메서드가 있으며 각 단계별 메서드에 대해 간단히 알아보려 한다. 참고로 클래스형 컴포넌트에서만 사용 가능하다. 아래 그림을 참고하자.
🗨️마운트(생성)
✔️constructor : 컴포넌트가 만들어지면 가장 먼저 실행되는 메서드
✔️getDerivedStateFromProps : props로 받아온 것을 state에 넣을 때 사용하는 메서드이며, 컴포넌트가 처음 렌더링 되기 전에 호출되며 리렌더링 되기 전에도 항상 실행된다.
✔️render : 컴포넌트를 렌더링 하는 메서드
✔️componentDidMount : 컴포넌트의 첫 렌더링을 마친 후 호출되는 메서드이며, 이 메서드가 호출되는 시점에선 이미 컴포넌트가 화면에 출력된 상태이다. 이 단계에선 axios, fetch 등을 사용해 해당 컴포넌트에서 필요하는 데이터를 요청하는 등의 작업을 진행한다.
🗨️업데이트(갱신)
✔️getDerivedStateFromProps : 마운트 단계와 동일하며, 컴포넌트의 props나 state가 변경됐을 때도 호출되는 메서드
✔️shouldComponentUpdate : 컴포넌트의 리렌더링 여부를 결정하는 메서드로, React.memo와 역할이 비슷하다.
✔️render : 컴포넌트를 렌더링 하는 메서드
✔️getSnapshotBeforeUpdate : render에서 만들어진 결과가 브라우저에 실제 반영되기 직전에 호출되는 메서드. 컴포넌트에 변화가 일어나기 직전의 DOM 상태를 가져와서 특정 값을 반환하면 그 다음 발생하게 되는 componentDidUpdate 메서드에서 받아와 사용을 할 수 있다. 하나의 예시로 페이지에 새로운 내용이 추가됐을 때 사용자의 스크롤 위치를 새로운 내용이 아닌 기존 위치로 유지하기 위해 사용할 수 있다. 참고로 함수형 컴포넌트 개발 시 훅을 사용하여 getSnapshotBeforeUpdate 메소드를 대체할 수 없다. 벨로퍼트님 블로그 참고
✔️componentDidUpdate : 리렌더링을 마친 후 브라우저에 모든 변화가 나타난 후 호출되는 메서드. 세 번째 파라미터로 ✔️getSnapshotBeforeUpdate에서 반환한 값을 불러올 수 있다.
🗨️언마운트(제거)
✔️componentWillUnmount : 컴포넌트가 브라우저에서 사라지기 직전에 호출되는 메서드. 주로 DOM에 직접 등록했던 이벤트를 제거하는 등의 작업을 한다.
🗨️기타
✔️componentDidCatch : 컴포넌트 렌더링 중 에러가 발생했을 경우 애플리케이션이 중단되지 않고 오류 화면을 보여주는 메서드.