다시 공부하는 리액트 7장 컴포넌트의 라이프사이클 메서드

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

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

컴포넌트를 처음 렌더링 할 때 어떤 작업을 처리해야 하거나 컴포넌트를 업데이트하기 전후로 어떤 작업을 처리해야 할수도 있고,

불필요한 업데이트를 방지해야 할수도 있다.

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

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

 

1. 라이프사이클 메서드의 이해

라이플사이크 메서드의 종류는 총 9가지 이다.

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

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

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

 

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

마운트

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

 

마운트할 때 호출하는 메서드

1. 컴포넌트 만들기

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

3. getDerivedStateFormProps : props에 있는 값을 state에 넣을 때 사용하는 메서드

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

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

 

업데이트

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

1. props가 바뀔 때

2. state가 바뀔 때

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

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

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

 

업데이트할 때 호출하는 메서드

1. 업데이트를 발생시키는 요인 -> props 변경, state 변경, 부모 컴포넌트 리렌더링

2. getDerivedStateFromProps : 이 메서드는 마운트 과정에서도 호출되며, 업데이트가 시작하기 전에 호출된다. props의 변화에 따라 state 값에도 변화를 주고 싶을 때 사용한다.

3. shouldComponentUpdate : 컴포넌트가 리렌더링을 해야 할지 말아야 할지를 결정하는 메서드이다. 이 메서드는 true 혹은 false 값을 반환해야 하며, true를 반환하면 다음 라이프사이클 메서드를 계속 실행하고, false를 반환하면 작업을 중지한다. 즉 컴포넌트가 리렌더링 되지 않는다. 만약 특정 함수에서 this.forceUpdate() 함수를 호출한다면 이 과정을 생략하고 바로 render 함수를 호출 할 수있다.

4. render : 컴포넌트를 리렌더링 한다.

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

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

 

언마운트

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

 

언마운트할 때 호출하는 메서드

1. 언마운트 하기

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

 

 

2. 정리

라이프사이클 메서드는 컴포넌트 상태에 변화가 있을 때마다 실행하는 메서드이다.

이 메서드들은 서드파티 라이브러리를 사용하거나 DOM을 직접 건드려야 하는 상황에 유용하다.

추가로 컴포넌트 업데이트의 성능을 개선할 때는 shouldComponentUpdate가 중요하게 사용된다.