[React Class] Class Component Life Cycle(생명주기)

- 지난 시간

지난 시간에는 하위(자식) -> 상위(부모) Comonent에게 값을 전달 방법에 대해서 알아봤습니다.

 

혹시 이해 못 하신 분들이나 놓치신 분들은, 아래 링크를 통해 지난 시간 글을 학습하고 오시는 걸 추천드리겠습니다.

any-ting.tistory.com/9

[React Class] 하위(자식) -> 상위(부모) Component 데이터 전달

- 개요

이 글에서는 React 생명주기, 즉 Class Component Life Cycle에 대해서 알아보도록 하겠습니다.

 

그런데 생명주기란? 무엇일까요?... 어렵게 생각할 필요가 없습니다.

 

말 그대로 "생명에 주기"를 뜻합니다. (사람이 태어나서 죽을 때까지 그 안에 과정을 생명주기라 뜻 합니다.)

 

React Component는 생성 후 소멸될 때까지 생명주기가 있습니다.

 

그럼...? 이걸 왜 알아야 하고 왜 잘 지켜야 할까요??...

 

React로 개발을 했을 때 한 화면에 정말 다양한 Component와 많은 양에 Component들을 만들어서 사용하게 됩니다.

(뭐... 프로젝트마다 규모가 다르긴 하지만...? 보통 어느 정도 사이즈가 있다고 생각하겠습니다.)

 

효율적으로 관리하지 않으면 결국 사용자에게 좋지 않은 사이트 또는 화면을 제공한다고 생각합니다.

 

- 종류

첫째로 우리는 Component가 생성되고 수정되고 그리고 종료됐을 때 우리는 어떻게 처리를 해줘야 되는지에 대해서 알아야 합니다.

 

* Mount (시작) : DOM이 생성되고 웹 브라우저 상에 나타나는 것을 마운트(Mount)라고 합니다.

1. constructor(props) : 컴포넌트를 새로 만들 때마다 호출되는 "클래스 생성자" (Component 초기화, 초기 세팅 값 설정)

2. statci getDerivedStateFromProps(props, state) : props에 있는 값을 state에 동기화할 때 사용하는 메서드

3. render() : 우리가 생성한 Component UI를 렌더링 하는 메서드

4. componentDidMount() : 컴포넌트가 웹 브라우 저상에 나타난 후 호출하는 메서드

    (API 호출을 통해 데이터를 받아올 때 사용하면 좋다. setState 메서드가 마운트 이후에 동작하기 때문!!)

 

 constructor(props)

constructor(props)는 Component가 최초 생성될 때 초기 세팅을 한다. 만약 그런 게 없다면 설정하지 않아도 됩니다.

 

"생성자에 보통 state 값을 할당하거나 이벤트 함수를 할당합니다."

 

주의 사항

 1. super(props)를 호출해야 한다. 그렇지 않으면 this.props가 생성자 내에서 정의되지 않아 버그가 발생한다.

 2. constructor(props) 내부에서 setState()를 호출하면 안 된다!

 3. state에 props를 복사해서 사용하면 안 된다.

 

App Component

Home Component

위 소스 코드를 랜더링 하면 아래와 같은 화면이 보입니다. 여기서 중요한 건 함수들에 호출 시점입니다.

 

render & constructor

App Component가 먼저 호출이 되고 그 후 자식 Component인 Home Component가 호출되는 걸 확인할 수 있습니다.

 

그리고 render 함수가 호출하기 전에 constructor 함수가 호출됩니다. 호출하면서 state 값을 설정하는 걸 확인할 수 있습니다.

 

static getDerivedStateFromProps(props, state)

getDerivedStateFromProps(props, state) 함수는 Mount와 Update 시 모두 render 함수를 호출하기 직전에 호출된다. (렌더링 때마다 매번 실행되니 주의해야 된다...)

 

사실 이 함수는 정말 특별한 static 한 정적인 값을 설정할 때 사용됩니다. 보통은 잘 안 쓰인다는 거죠.

 

공식 홈페이지 자료를 확인해 보시면 쓰임세를 알 수 있습니다.

 

공식 홈페이지 자료

getDerivedStateFromProps

App.js에서 name props를 내려줬습니다.

 

39번 라인을 통해 state 값을 확인하고 state 값을 수정하는 것을 확인할 수 있습니다.

 

결과 화면

render()

render 함수는 설명하지 않아도 알 것 같습니다. HTML, CSS가 표현되는 부분이라고 생각하시면 됩니다.

 

componentDidMount()

componentDidMount() 함수는 render 함수가 호출되고 바로 호출되는 경우입니다.

 

네트워크 요청을 보내 데이터를 받아오기 적절한 함수입니다.

(혹시 네트워크 연결을 해제해야 되는 상황에서는 꼭 componentWillUnmount 함수를 호출해서 해제를 해야 한다.)

 

componentDidMount()

결과 화면

props로 name 값을 전달받았지만 실질적으로 componentDidMount() 함수가 호출되면서 다시 재 랜더링이 되었습니다.

 

 

* Update(수정) : props 또는 state가 변경되면 갱신이 발생되며, 발생 시 아래와 같은 함수가 호출됩니다.

1. static getDerivedStateFromProps(props, state) : props에 있는 값을 state에 동기화할 때 사용하는 메서드(위 내용을 참고해주세요.)

2. shouldComponentUpdate(nextProps, nextState) : re-rendering을 여부를 판단하는 함수

 

3. render() : 우리가 생성한 Component UI를 렌더링 하는 메서드(위 내용을 참고해주세요.)

4. getSnapshotBeforeUpdate(pervProps, prevState) : 실제 DOM에 변화가 적용되기 직전에 호출

5. componentDidUpdate(prevProps, prevState, snapshot) : 

 

shouldComponentUpdate(nextProps, nextState)

shouldComponentUpdate(nextProps, nextState) 함수는 재 랜더링을 여부를 판단할 수 있는 함수입니다.

 

기본적으로 true를 리턴합니다. (defaulte true)

true를 retrun 하면 getSnapshotBeforeUpdate() -> componentDidUpdate() 실행됩니다.

false로 설정하면 재 랜더링이 되지 않습니다.

 

return false

결과 화면

 

숫자가 증가하지 않습니다. 만약 true로 값을 변경하면 값이 증가하는지 확인해보겠습니다.

return true

결과 화면

값이 증가하는 것을 확인할 수 있습니다.

 

getSnapshotBeforeUpdate(pervProps, prevState)

getSnapshotBeforeUpdate(pervProps, prevState) 함수는 shouldComponentUpdate() 함수가 true를 리턴하면 호출되는 함수입니다.

 

실제 DOM에 변화가 적용 되기 직전에 호출됩니다. 여기서 return 값은 componentDidUpdate(prevProps, prevState, snapshot) 세 번째 파라미터 값으로 전달받습니다.

 

중요한 부분은 DOM 업데이트가 일어나기 직전의 시점입니다!.

 

componentDidUpdate(prevProps, prevState, snapshot)

componentDidUpdate(prevProps, prevState, snapshot) 함수는 render() 함수를 호출하고 난 다음에 발생됩니다.

 

그리고 snapshot 세 번째 파라미터 값을 받아서 사용할 수 있습니다.

 

render함수가 호출하고 난 다음 발생하기 때문에 값을 최종적으로 확인할 때 좋은 함수입니다.

 

재 랜더링 Component Update

결과 화면

이번 시간에는 Component Class 생명주기 Life Cycle에 대해서 알아봤습니다.

 

다음 시간에는 이번 시간까지 알아본 기술들을 통해 메모장을 만들어 보도록 하겠습니다. :) 

 

참고 사이트

1. 공식 홈페이지 : ko.reactjs.org/docs/react-component.html#static-getderivedstatefromprops

React.Component – React

2. 생명주기 다이얼로그: projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

React Lifecycle Methods diagram