React 생명주기 (Lifecycle)
이번에 알아 볼 내용은 useEffect Hook에 대해 알아보기 전에 생명주기에 대한 내용을 짚고 넘어가야 할 거 같아서는 먼저 생명 주기란 무엇인지 대해 알아보기로 한다!
생명주기 (Lifecycle) 란?
소프트웨어 개발에서 생명주기(Lifecycle)이란 어떤 프로그램이 실행되고, 종료되는 과정을 의미한다.
리액트 생명주기란?
리액트에서는 리액트 웹 어플리케이션에서 컴포넌트가 생성(실행)되고, 삭제(종료)되는 과정을 의미한다. 리액트에서는 이러한 과정을 세세하게 나누어 컨트롤 할 수 있다. 아래에 일련의 과정을 나타낸 이미지를 참고해보도록 하자.
I. 클래스형 컴포넌트 생명주기 Method
생성, 실행(Mount) ➡️ 업데이트(Update, Re-render) ➡️ 삭제, 종료 (Unmount)
1. 생성, 실행(Mount)
Mount 단계에서 실행되는 메서드를 순서대로 알아보자.
constructor
- 컴포넌트가 생성 될 때마다 호출되는 컴포넌트 생성자 메서드
this.props,this.state에 접근할 수 있어 초기 값을 정할 수 있다.
constructor(props) {
super(props);
console.log("constructor");
}static getDerivedStateFromProps
props의 값을state에 넣어서 사용할 때의 메서드- 반환 값으로 특정 객체를 반환하게 되면 객체 안의 내용들이 컴포넌트의
state로 설정되며null을 반환할 경우 아무 일도 발생하지 않음
static getDerivedStateFromProps(nextProps, prevState) {
if (nextProps.color !== prevState.color) {
return { color: nextProps.color };
}
return null;
}render()
- 컴포넌트를 렌더링하는 메서드
- 컴포넌트를 DOM에 Mount하기 위해 호출
componentDidMount
- 컴포넌트가 브라우저상(화면)에 나타난 이후에 호출하는 메서드
- 이 메서드에서 라이브러리 또는 프레임워크의 함수 호출을 하거나
이벤트 등록,setTimeout,setInterval,네트워크 요청등과 같은 비동기 작업을 처리 하면 된다.
2. 업데이트 (Update, Re-render)
Update의 단계로 컴포넌트 업데이트 시점의 메서드를 순서대로 알아보자.
컴포넌트가 업데이트 되는 경우
props가 변경될 때state가 변경될 때- 부모 컴포넌트가 리렌더링 될 때
this.forceUpdate로 렌더링을 강제로 트리거 할 때
static getDerivedStateFromProps
- Mount에서도 호출되는 메서드이며
props의 변화에 따라state에도 변화를 주고자 할 때 사용한다.
shouldComponentUpdate
- 컴포넌트의 리렌더링 여부를 결정하는 메서드
- 반환 값에 따라
true: 리렌더링,false: 리렌더링 하지 않음
render
- 컴포넌트를 렌더링하는 메서드
getSnapshotBeforeUpdate
- 컴포넌트 변화를 DOM에 반영하기 직전에 호출하는 메서드
- 업데이트 직전의 값을 참고할 때 활용한다.
getSnapshotBeforeUpdate(prevProps, prevState) {
if (prevState.array !== this.state.array) {
const { name, price } = this.item
return { name, price };
}
}componentDidUpdate
- 컴포넌트의 업데이트가 끝나고 호출하는 메서드
prevPropsorprevState를 사용하여 컴포넌트가 이전에 가졌던 데이터 접근할 수 있다.getSnapshotBeforeUpdate의 반환 값이 있다면snapshot으로 전달받을 수 있다
componentDidUpdate(prevProps, prevState, sanpshot) {...}3. 삭제, 종료 (Unmount)
DOM에서 컴포넌트가 제거되어 화면에서 사라지는 것을 말한다.
componentWillUnmount
- 컴포넌트가 브라우저상(화면)에서 사라지기 전에 호출하는 메서드
componentDidMount에서 등록한 이벤트, 타이머, 직접 생성한 DOM이 있다면 여기서 제거를 해주어야 한다.
II. 함수 컴포넌트 생명주기
리액트의 16.8 업데이트 이후로 클래스 컴포넌트의 생명주기 메서드를 클래스가 아닌 Hook을 통해 함수 컴포넌트에서도 생명주기를 다룰 수 있게 되었다.
Mounting
- 함수 컴포넌트가 호출되었을 때 먼저 컴포넌트 내부에서 Mounting을 한다.
- 생명주기 메서드는 아니다.
Return
- 컴포넌트에서
return문이 실행된다. - 생명주기 메서드가 아니다.
useEffect Mounting (LifeCycle)
- 렌더링 이후에 실행되는 메서드이다.
useEffect Updating (LifeCycle)
- 컴포넌트 내부에서 관찰하고 있는 종속성 배열의 값이 변경될 때 실행된다.
useEffect Unmounting (LifeCycle)
- 컴포넌트가 브라우저상(화면)에서 사라질 때 실행된다.
정리
함수 컴포넌트에서의 생명주기는 이와같이 useEffect Hook과 매우 관련되어 있다. 클래스형 컴포넌트의 생명주기를 대체하는 Hook으로도 불리는 useEffect는 다음 글에서 정리해려고 한다. 현재에는 클래스형 컴포넌트보다는 함수 컴포넌트를 주로 사용하고 있다. 나 또한 함수 컴포넌트로 공부하였고, 개발을 진행하다보니 잘 몰랐던 클래스형 컴포넌트의 생명주기 메서드에 대해 알게 되어서 재미있었다.
앞으로도 함수 컴포넌트를 사용하겠지만 이 내용들에 대해 알고있다면 추후에 어떤 기능을 개발할 때 어떻게 동작하는지 동작 순서와 같은 부분을 이해하는데에 좀 더 도움이 될 것이라고 생각한다!
.
.
.
.
.
.
.
참고 사이트
[minbr0ther] - 리액트 라이프사이클 순서, 역할, Hook
[dea8307] - React 라이프사이클 이해
[tistory-younho9] - 라이프사이클 메서드
[jinyoung985] - 함수형 컴포넌트의 생명주기
[리액트 공식문서] - State와 라이프사이클
