[FE면접/React] 리액트 라이프사이클(LifeCycle Method)

 

 

출처: https://react.vlpt.us/basic/25-lifecycle.html

1. 라이프 사이클(생명주기)

💡 라이프 사이클(생명주기)이란?
'컴포넌트가 렌더링을 준비하는 순간부터 페이지에서 사라질 때까지' 를 뜻한다.

컴포넌트는 크게 세 가지 카테고리로 나뉜다.

 

1. 생성(Mount)
: DOM이 생성되고 웹 브라우저 상에 나타나는 것

2. 수정(Update)
: 컴포넌트가 업데이트 되는 경우

3. 제거(Unmount)
: 컴포넌트를 DOM에서 제거하는 과정

 

 

프로젝트에서 컴포넌트를 처음 렌더링할 때 어떤 작업을 처리해야 하는지, 또는 컴포넌트를 업데이트 하기 전후로 어떤 작업을 처리해야 하는지를 알아야 불필요한 업데이트를 방지할 수 있다.

그렇기 때문에 우리는 리액트의 라이프 사이클에 대해 알아야 한다.

 

2. React LifeCycle(리액트 라이프 사이클)

들어가기 앞서, 리액트 라이프 사이클 함수는 클래스형 컴포넌트에서만 사용할 수 있다.

리액트 공식 메뉴얼에서는 클래스형 컴포넌트보다 함수형 컴포넌트를 권장하며, 우리 또한 개발 시 함수형 컴포넌트 형태로 개발하고 있을 것이다.

 

그렇다면 리액트 라이프 사이클은 필요없는 것이냐?

그것은 아니다.

 

React 16.8.0 버전부터는 React Hooks로 라이프 사이클 함수를 대체할 수 있다.

 

그렇기 때문에 리액트 라이프 사이클은 이런 것이 있다 정도로 알고 넘어가면 좋을 것 같다.

 

 

1. Mount

---

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

constructor	컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드
getDerivedStateFromProps	props에 있는 값을 state에 넣을 때 사용하는 메서드
render	UI를 렌더링 하는 메서드
componentDidMount	컴포넌트가 웹 브라우저상에 나타난 후 호출하는 메서드

 

2. Update

---

컴포넌트가 업데이트 되는 경우는 다음 4 가지 경우가 있다.

1. props가 바뀔 때
2. state가 바뀔 때
3. 부모 컴포넌트가 리렌더링 될 때
4. this.forceUpdate로 강제로 렌더링을 트리거 할 때

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

 

3. Unmount

---

마운트의 반대과정으로 컴포넌트를 DOM에서 제거하는 과정이다.

componentWillUnmount

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

 

 

 

 

[참고]

https://ko.reactjs.org/docs/state-and-lifecycle.html

https://react.vlpt.us/basic/25-lifecycle.html

https://ko.reactjs.org/docs/hooks-overview.html