[React] React 컴포넌트 Lifecycle Methods

React의 Component 에는 Life Cycle(생명주기)이 존재합니다.

라이프 사이클은 Component가 생성(Mount), 업데이트(Update), 제거(UnMount) 될 때 특정 이벤트를 호출하는 것입니다.

이러한 Life Cycle을 다루기 위해 리액트 클래스 컴포넌트는 Lifecycle Method를 사용하고, 함수형 컴포넌트는 Hook을 사용합니다.

이번 포스팅은 리액트 클래스 컴포넌트의 Lifecycle Methods에 대해 알아보겠습니다.

이번 포스팅에선 이전 포스팅에서 다룬 클래스 컴포넌트 개념과 React Hooks의 개념이 일부 사용되고 있습니다.

 

 

Class Componet 생명주기

Lifecycle Methods는 한국어로 "생명주기 메서드" 라고 부릅니다. 생명주기 메서드는 컴포넌트가 브라우저상에 나타나고, 업데이트되고, 사라지게 될 때 호출되는 메서드들 입니다. 추가적으로 컴포넌트에서 에러가 났을 때 호출되는 메서드도 있습니다.

생명주기 메서드는 클래스형 컴포넌트에서만 사용할 수 있습니다. 이전에 배웠었던 useEffect와 비슷하다고 생각하시면 됩니다.

 

클래스형 컴포넌트의 Life Cycle

1. 마운트(Mount)

마운트(Mount)는 DOM객체가 생성되고 브라우저에 나타나는 것을 의미합니다. 이때 호출되는 함수는 다음과 같습니다.

✅ constructor()

• 컴포넌트 클래스의 생성자 함수로 컴포넌트를 만들 때 처음으로 호출되는 함수
• state의 초기값을 지정할 때 사용합니다.
• this.props, this.state에 접근이 가능하고 리액트 요소를 반환합니다.

✅ getDerivedStateFromProps()

• props와 state 값을 동기화할 때 사용하는 함수
• 이 함수는 컴포넌트가 처음 렌더링 되기 전에도 호출 되고, 이후 리렌더링 되기 전에도 매번 실행됩니다.

✅ render()

• 컴포넌트의 기능과 모양새를 정의하는 함수
• 리액트 요소를 반환합니다.

✅ componentDidMount()

• 컴포넌트를 생성하고 첫 렌더링이 끝났을 때 호출되는 함수
• 이 메서드가 호출되는 시점에는 화면에 컴포넌트가 나타난 상태입니다.
• 주로 DOM을 사용해야 하는 외부 라이브러리 연동, 해당 컴포넌트에서 필요로 하는 데이터를 ajax로 요청 등의 동작을 수행합니다.

 

2. 업데이트(Updating)

컴포넌트가 업데이트(Update) 될 때 실행되는 함수들을 살펴보겠습니다.

컴포넌트가 업데이트되는 경우는 props 값 변경, state 값 변경, 부모 컴포넌트가 리렌더링 될 때, this.forceUpdate로 강제로 리렌더링 되는 경우가 있습니다.

✅ getDerivedStateFromProps()

• 마운트(Mount) 과정에서도 호출되었던 함수로, props와 state 값을 동기화할 때 사용하는 함수

✅ shouldComponentUpdate()

• 컴포넌트를 리렌더링 할지 말지를 결정하는 함수
• React.memo와 유사한 역할을 수행하며 주로 최적화 할 때 사용하는 함수입니다.
• true를 반환하면 함수들을 호출하여 업데이트에 따른 리렌더링을 진행하며, false를 반환할경우 리렌더링을 하지 않고 함수들도 실행하지 않습니다.

shouldComponentUpdate(nextProps, nextState) {
    console.log("shouldComponentUpdate", nextProps, nextState);
    // 숫자의 마지막 자리가 4면 리렌더링하지 않습니다.
    return nextState.number % 10 !== 4;
  }

✅ render()

• 새로운 값을 사용하여 View를 리렌더링할 때 사용하는 함수

✅ getSnapshotBeforeUpdate()

• 변경된 요소에 대하여 DOM 객체에 반영하지 직전에 호출되는 함수
• 이후 componentDidUpdate함수에서 해당 값을 받아와 사용 할 수 있습니다.

✅ componentDidUpdate

• 컴포넌트 업데이트 작업이 끝난 리렌더링 후에 호출되는 함수
• 3번째 파라미터로 componentDidUpdate에서 반환한 값을 조회 할 수 있습니다.

함수형 컴포넌트 + Hooks 를 사용 할 때에는 getSnapshotBeforeUpdate를 대체 할 수 있는 기능이 아직 없습니다. DOM 에 변화가 반영되기 직전에 DOM 의 속성을 확인하고 싶을 때 이 생명주기 메서드를 사용하면 된다는 것을 알아두세요.

 

3. 언마운트(unmount)

컴포넌트가 DOM에서 제거되는 것을 언마운트(UnMount)라고 합니다.

호출되는 함수는 하나로 componentWillUnmount함수입니다. 해당 컴포넌트가 제거되기 직전에 호출됩니다.

✅ componentWillUnmount()

• 컴포넌트를 DOM에서 제거할 때 호출되는 함수
• 주로 DOM에 직접 등록했었던 이벤트를 제거하고, 만약에 setTimeout을 실행중이라면 clearTimeout을 통하여 제거 합니다.
• 외부 라이브러리를 사용한게 있고, 해당 라이브러리에 dispose기능이 있다면 이 함수 내에서 호출합니다.

 

 

마치며

지금까지 리액트 클래스 컴포넌트의 Lifecycle Methods에 대해 알아보았습니다. 

 

이전에 작성한 '쉽게 알아보는 React Hooks 가이드북'에 비교하면 꽤나 정보를 나열하는 느낌으로 이번 포스팅을 기획하였습니다. 물론 클래스 컴포넌트의 Lifecye Methods는 개념적으로 중요하지만, Method 자체를 사용할 일은 많지 않으실 겁니다. 특히 리액트를 이제 막 학습하신 분들이라면 이 개념을 학습하는데 너무 많은 시간을 쏟지 마시고, Life Cycle의 개념과 Lifecycle Methods에는 어떤 함수가 존재하는지 정도만 알아 두시고, 나중에 사용해야 할 일이 생길 때 공식 문서를 참고하시는 것을 추천드리겠습니다. 

 

현재 리액트에선 Life Cycle을 다룰 때 주로 Function Component + Hook을 이용합니다. 이와 관련된 포스팅은 이전에 자세히 다루었기 때문에 이번 포스팅에선 Class Component에서 Life Cycle을 다룰 때 사용하는 Lifecycle Methods에 대해 중점적으로 다루었습니다. Function Componet에서의 Life Cycle을 다루는 방법에 대해 자세히 알고 싶으신 분들은 이전 포스팅과 아래 링크를 참고해주세요.

https://adjh54.tistory.com/43

[React] 함수형 컴포넌트 생명주기(lifecycle) 이해하기

저도 기회가 된다면 이와 관련된 보다 자세한 포스팅을 업로드 할 수 있도록 노력하겠습니다.

 

 

참고

[React] 리액트의 생명주기와 Hook

[React] 리액트의 생명주기와 Hook

[React.js] 리액트 라이프사이클(life cycle) 순서, 역할, Hook

[React.js] 리액트 라이프사이클(life cycle) 순서, 역할, Hook

25. LifeCycle Method · GitBook

25. LifeCycle Method · GitBook

[React] 리액트 - 컴포넌트 생명 주기 (Component Life Cycle)

[React] 리액트 - 컴포넌트 생명 주기 (Component Life Cycle)