컴포넌트의 라이프 사이클 메서드 (1)

모든 리액트 컴포넌트에는 라이프사이클이 존재합니다. 컴포넌트의 수명은 페이지에 렌더링 되기 전의 준비과정에서 시작하여 페이지에서 사라질 때 끝납니다.

 

리액트 프로젝트를 진행하다 보면 가끔 컴포넌트를 처음으로 렌더링할 때 어떤 작업을 처리해야 하거나 컴포넌트를 업데이트하기 전후로 어떤 작업을 처리해야 할 수도 있고, 또 불필요한 업데이트를 방지해야 할 수도 있습니다.

 

이때는 컴포넌트의 라이프사이클 메서드를 사용합니다.

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

함수형 컴포넌트에서는 사용할 수 없지만, 그 대신 Hooks 기능을 사용하여 비슷한 작업을 처리할수 있습니다.

 

라이프 사이클 메서드의 종류는 총 아홉 가지 입니다. 

 

Will 접두사가 붙은 메서드는 어떤 작업을 작동하기 전에 실행되는 메서드이고

Did 접두사가 붙은 메서드는 어떤 작업을 작동한 후에 실행되는 메서드입니다.

 

라이프 사이클은 총 세가지, 즉 마운트, 업데이트, 언마운트 카테고리로 구분이 되어집니다.

 

리액트 컴포넌트의 라이프사이클

구체적인 리액트 컴포넌트 라이프사이클 메서드

 

마운트

 

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

이때 호출하는 메서드는 다음과 같습니다.

 

- constructor : 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드

- getDerivedStateFromProps : props에 있는 값을 state에 넣을 때 사용하는 메서드

- render : 우리가 준비한 UI를 렌더링 하는 메서드

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

 

업데이트

 

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

 

1. props가 바뀔 때 

2. state가 바뀔 때

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

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

 

이렇게 컴포넌트가 업데이트 될때 다음과 같은 메서드를 호출합니다.

 

- getDerivedStateFromprops : 이 메서드는 마운트 과정에서도 호출되며, 업데이트가 시작하기 전에도 호출됩니다. props의 변화에

                                                    따라 state 값에도 변화를 주고 싶을때 사용합니다.

 

- shouldComponentUpdate : 컴포넌트가 리렌더링을 해야 할지 말아야 할지를 결정하는 메서드 입니다.

 

- render : 컴포넌트를 리렌더링 합니다.

 

- getSnapshotBeforeUpdate : 컴포넌트 변화를 DOM에 반영하기 바로 직전에 호출하는 메서드 입니다.

 

- componentDidUpdate : 컴포넌트의 업데이트 작업이 끝난 후 호출하는 메서드입니다.

 

언마운트 

 

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

 

- componentWillunmount : 컴포넌트가 웹 즈라우저상에서 사라지기 전에 호출하는 메서드 입니다.