React | 라이프 사이클 API 흐름 내려다보기

sik2·2021년 6월 6일

React

목록 보기

1/4

들어가며

제가 리엑트를 처음 접한건 2017년 경 강남에서 열였던 컨프런스 세션이었습니다. 그때 당시 리엑트는 다소 러닝커브가 높아보였습니다. 클래스형 컴포넌트의 복잡함, 리덕스 등등 그래서 Vue가 쉽고 간편하다고 각광 받기도 했습니다. 하지만 이후 React는 많은 변화를 했습니다. 그중 하나가 Hooks 개념입니다. 확실히 페이스북이라는 기업에서 케어하는 라이브러리다보니 사용자의 요구에 애자일스럽게 대응하는 느낌입니다.

리엑트 공식 홈페이지에서는 가급적 함수형 컴포넌트 + Hooks 사용을 권장하고 있습니다.
Hooks를 배우실 분들은 이 포스팅에서 마운트, 업데이트, 언마운트의 개념만 잡으시고 Hooks 자료로 넘어가시면 됩니다. 과거 클래스형 컴포넌트에서 어떠한 불편함이 발생하였고 이를 함수형 컴포넌트와 Hooks 어떻게 대체하였는지 궁금하시다면 시리즈를 정주행 하시면 됩니다.🙃

도입

모든 리액트 컴포넌트는 라이프사이클(생명 주기)이 존재합니다. 클래스형 컴포넌트에서만 사용이 가능합니다. 함수형 컴포넌트는 사용할 수 없습니다. 다만, 리액트 v16.8 이후에는 Hooks 개념이 도입되면서 라이프 사이클과 같은 작업을 처리할 수 있습니다.

라이플사이클 메서드

라이플 사이클의 종류는 총 9가지입니다. 이를 접두사, 카테고리 별로 나누어 살펴보겠습니다.

라이플사이클 접두사

Will 접두사 => 어떤 작업을 작동하기 전에 실행되는 메서드 입니다.
Did 접두사 => 어떤 작업을 작동 후에 실행되는 메서드 입니다.

라이플사이클 카테고리 3가지

마운트(생성), 업데이트(변경), 언마운트(제거)

마운트(Mount)

DOM이 생성되고 웹 브라우저상에 나타나는 것을 마운트라고 합니다.
마운트의 종류(위부터 아래로 메서드 호출 순서)
- constructor() : 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드입니다. 객체지향 프로그래밍을 하셨다면 조금 익숙한 키워드입니다.
- static getDerivedStateFromProps() : props에 있는 값을 state에 넣을 때 사용하는 메서드입니다.
- render() : UI를 렌더링하는 메서드입니다.
- compoentDidMount() : 컴포넌트가 웹 브라우저상에 나타난 후 호출하는 메서드입니다.

업데이트(Update)

컴포넌트는 아래의 4가지 조건에서 업데이트를 합니다.
컴포넌트 업데이트 조건 4가지
- props가 바뀔 때
- state가 바뀔 때
- 부모 컴포넌트가 리렌더링될 때
- this.forceUpdate로 강제로 렌더링을 트리거할 때
업데이트의 종류 (위로부터 호출순서)
- getDerivedStateFromProps() : 마운트 과정에서도 호출되며 업데이트가 시작하기 전에 호출됩니다. props의 변화에 따라 state 값에도 변화를 주고 싶을 때 사용합니다.
- shouldComponentUpdate() : 컴포넌트가 리렌더링을 할지 말지 결정하는 메서드입니다. 리턴 값은 true 와 false 입니다. this.forceUpdate() 함수를 호출한다면 이 과정을 생략하고 render 함수를 호출합니다.
- render() : 컴포넌트를 리렌더링 합니다.
- getSnapshotBeforeUpdate() : 컴포넌트 변화를 DOM에 반영하기 바로 직전에 호출하는 메서드입니다.
- componentDidUpdate() : 컴포넌트의 업데이트 작업이 끝난 후 호출하는 메서드