[React]라이프사이클 메서드의 이해

봐도봐도 모르겠는 리액트,,,,

라이프사이클을 제대로 이해하지 못한 것 같아 '리액트를 다루는 기술' 책을 참고하여 다시 정리하고자 한다.

 

---

 

모든 리액트 컴포넌트에는 라이프사이클(수명 주기)이 존재한다.

컴포넌트의 수명은 페이지에 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝난다.

 

참고로, 라이프사이클 메서드는 클래스형 컴포넌트에서만 사용할 수 있다.

함수 컴포넌트에서는 사용할 수 없는데, Hooks 기능을 사용하여 비슷한 작업을 처리할 수 있다.

 

 

라이프사이클 메서드의 종류는 총 9가지.

 

Will 

: 어떤 작업을 작동하기 전에 실행되는 메서드

 

Did

: 어떤 작업을 작동한 후에 실행되는 메서드

컴포넌트의 라이프사이클

 

 

이 메서드들은 우리가 컴포넌트 클래스에서 덮어 써 선언함으로써 사용할 수 있다.

라이프사이클은 총 세가지, 즉 마운트, 업데이트, 언마운트 카테고리로 나눈다.

 

 

- 마운트(mount)

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

이때 호출하는 메서드는

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

 

 

- 업데이트(update)

컴포넌트는 다음과 같은 총 네가지 경우에 업데이트 한다.

 

1. props가 바뀔 때

- 부모 컴포넌트에서 넘겨주는 props가 바뀔 때,

  컴포넌트에 전달하는 props의 값이 바뀌면 컴포넌트 렌더링이 이루어진다.

2. state가 바뀔 때

- 컴포넌트 자신이 들고 있는 state가 setState를 통해 업데이트 될 때

3. 부모 컴포넌트가 리렌더링될 때

- 자신에게 할당된 props가 바뀌지 않아도, 또는 자신이 들고 있는 state가 바뀌지 않아도,

  부모 컴포넌트가 리렌더링되면 자식 컴포넌트 또한 리렌더링 된다.

4. this.forceUpdate로 강제로 렌더링을 트리거할 때

 

이렇게 컴포넌트를 업데이트를 할 때는 다음 메서드를 호출한다.

업데이트를 발생시키는 요인.
-> getDerivedStateFromProps ( 업데이트가 시작되기 전에도 호출된다. props의 변화에 따라 state 값에도 변화를 주고 싶을 때 사용 )
-> shouldComponentUpdate ( 컴포넌트가 리렌더링을 해야 할지 말아야 할지를 결정하는 메서드. 이 메서드에서는 true / false 값을 반환해야 하며, false 반환 시 리렌더링되지 않는다. 만약 특정 함수에서 this.forceUpdate() 함수를 호출한다면 이 과정을 생략하고 바로 render 함수를 호출. )
-> render ( 컴포넌트 리렌더링 )
-> getSnapshotBeforeUpdate ( 컴포넌트 변화를 DOM에 반영하기 바로 직전에 호출하는 메서드 )
-> ( 웹 브라우저상의 실제 DOM 변화 )
-> componentDidUpdate ( 컴포넌트의 업데이트 작업이 끝난 후 호출하는 메서드 )

 

 

- 언마운트(unmount)

마운트의 반대 과정, 즉 컴포넌트를 DOM에서 제거하는 것을 언마운트 라고 한다.

 

다음 메서드 호출.

언마운트하기
-> componentWillUnmount ( 컴포넌트가 웹 브라우저상에서 사라지기 전에 호출하는 메서드 )