컴포넌트 라이프 사이클

컴포넌트 라이프 사이클

모든 리액트 컴포넌트는 라이프 사이클(수명 주기)가 존재한다. 컴포넌트의 수명은 페이지에 렌더링되기 전, 준비 과정에서 시작해서 페이지에서 사라질 때 끝난다.

리액트를 사용할 때 컴포넌트를 처음으로 렌더링할 때 어떤 작업을 해야 하거나 컴포넌트를 업데이트 하기 전후로 어떤 작업을 해야할 수도 있다. 또한 불필요한 업데이트를 방지해야 할 때도 있을 수 있다.

이와 같은 상황을 위해 컴포넌트의 라이프 사이클 메서드를 사용한다. 이러한 라이프 사이클 메서드는 클래스형 컴포넌트에서만 사용가능하다. (함수형 컴포넌트에서는 사용할 수 없다는 의미) 대신 함수형 컴포넌트에서는 Hooks를 이용해서 비슷하게 라이프 사이클 메서드를 사용할 수 있다.

 

라이프 사이클 메서드 종류

사진 출처 : https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

라이프 사이클 메서드의 종류는 총 9개다.

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

Did 접두사가 붙은 메서드 : 특정 작업을 작동한 후에 실행되는 메서드

라이프 사이클 메서드들은 컴포넌트 클래스에 덮어 써서 선언해서 사용한다.

 

라이프 사이클 메서드는 3가지 분류로 나뉘어진다. 여기서 3가지 분류는 사진에 나온 것과 같은 마운트, 업데이트, 언마운트이다. 

• 마운트 : 페이지에 컴포넌트가 나타나는 것
• 언마운트 : 페이지에서 컴포넌트가 사라지는 것
• 업데이트 : 컴포넌트의 정보를 업데이트

 

마운팅(컴포넌트를 생성)

- 마운팅 과정

1. constructor
2. compnentWillMount
3. render
4. componentDidMount

- 마운팅 메서드

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

이 메서드에서 초기 state를 정할 수 있다.

 

• componentWillMount : 렌더링을 하기 전 호출되는 메서드, 컴포넌트가 DOM 위에 만들어지기 전에 실행된다(화면에 나타나기 전에 실행된다)

React v16.3 이후부터는 componentWillMount이 deprecated(다른 것으로 대체되었거나 될 수 있으니 주의해서 사용하라는 의미)된다. 기존에 이 API에서 하던 작업들은 constructor와 componentDidMount에서 충분히 처리가 가능하게 되었기 때문이다. 따라서 React v16.3 부터는 UNSAFE_componentWillMount()라는 이름으로 사용을 한다. 혹은 상황에 따라서 새로운 API getDerivedStateFromProps로 대체가능하다.

getDerivedStateFromProps 메서드는 props로 받아온 값을 state에 동기화시키는 용도로 사용한다.

 

• render : 준비한 UI를 렌더링하는 메서드. 라이프 사이클 메서드들 중 유일하게 필수 메서드이다. 

이 메서드 안에서 this.props와 this.state에 접근할 수 있으며 리액트 요소를 반환한다. 이때 요소는 div 같은 태그가 될 수도 있고 따로 선언한 컴포넌트가 될 수도 있다. 아무것도 보여주고 싶지 않으면 null 값이나 false 값을 반환하도록 한다.

render 메서드 사용시 주의해야 할 점은, 브라우저의 DOM에 직접 접근하면 안되고, DOM 정보를 가져오거나 state를 변화시키고 싶다면 componentDidMount 메서드에서 처리해야 한다. 

• componentDidMount : 컴포넌트가 웹 브라우저 상에 나타난 후 호출하는 메서드. 컴포넌트를 만들고 첫 렌더링을 마친 후에 실행하는 메서드다. 다른 자바스크립트 라이브러리, 프레임워크 함수를 호출하거나 이벤트 등록, 네트워크 요청과 같은 비동기 작업을 이것으로 처리한다.

 

업데이트

컴포넌트가 업데이트 되는 이유 :

• 부모 컴포넌트에서 넘겨주는 props가 바뀔 때. 컴포넌트에 전달하는 props의 값이 바뀌면 컴포넌트 렌더링이 이루어진다.
• 컴포넌트 자신이 들고 있는 state가 setState를 통해 업데이트될 때.
• 부모 컴포넌트가 리렌더링될 때. 자신에게 할당된 props가 바뀌지 않아도 혹은 자신이 들고 있는 state가 바뀌지 않아도 부모 컴포넌트가 리렌더링 되면 자식 컴포넌트 또한 리렌더링 된다.
• this.forceUpdate로 강제로 렌더링을 트리거할 때.

 

 

-업데이트 과정

1. componentWillReceiveProps
2. shouldComponentUpdate
3. componentWillUpdate
4. render
5. componentDidUpdate

-업데이트 메서드

• componentWillReceiveProps : 컴포넌트가 새 속성을 받았을 때 실행된다.

이 메서드는 React v16.3부터 deprecate된다. 대신 UNSAFE_componentWillReceiveProps()로 사용할 수 있다. 혹은 getDerivedStateFromProps로 대체할 수 있다.

 

• shouldComponentUpdate : render 함수보다 먼저 호출되는 함수이다. props 혹은 state를 변경 시 컴포넌트의 리렌더링을 시작할 지 여부를 지정한다. 따라서 true 혹은 false를 반환해야 한다. 컴포넌트 생성 시 이 메서드를 따로 생성하지 않을 경우 기본적으로 true 값이 반환되도록 되어있다. true를 반환하면 다음 라이프 사이클 메서드를 계속 실행하고 false를 반환하면 작업을 중지한다(컴포넌트가 리렌더링 되지 않는다) 만약 특정 함수에서 this.forceUpdate() 함수를 호출한다면 이 과정을 생략하고 바로 render 함수를 호출할 수 있다.

• componentWillUpdate : 컴포넌트가 업데이트 되기 전에 실행된다. 새로운 속성이나 상태를 수신하고 렌더링하기 전에 호출되는 것이다. 등록된 업데이트에만 사용해야 한다. 업데이트 자체를 트리거(리렌더링)하지 않아야 한다. 따라서 this.setState를 통한 상태 변경은 허용되지 않는다. 컴포넌트를 갱신하는 중에 다시 갱신하도록 한다는 것은 좋지 않은 방법이므로 지양해야 하기 때문이다.

이 또한 React v16.3 이후 depreceate된다. getSnapsotBeforeUpdate로 대체된다.

 

• render : 컴포넌트를 렌더링한다.
• componentDidUpdate : 컴포넌트 리렌더링을 마친 후 실행된다.

 

-업데이트 과정(React v16.3이후)

1. getDerivedStateFromProps
2. shouldComponentUpdate
3. render
4. getSnapshotBeforeUpdate
5. componentDidUpdate

• getDerivedStateFropProps : 업데이트가 시작하기도 전에 호출된다. props의 변화에 따라 state 값에도 변화를 주고 싶을 때 사용한다. 마운트 과정에서도 호출될 수 있다.
• getSnapshotBeforeUpdate : 컴포넌트 변화를 DOM에 반영하기 전에 바로 직전에 호출하는 메서드다.

 

언마운트(컴포넌트 제거)

컴포넌트를 DOM에서 제거하는 것

• componentWillUnmount : 컴포넌트가 웹 브라우저 상에서 사라지기 전에 호출하는 메서드. 언마운트는 과정이라 할 것없이 이 메서드만 실행하면 된다.

 

 

참조

• 김민준, 리액트를 다루는 기술[개정판], 길벗
• ChanBLOG
• Abel's nomad software blog