React의 라이프 사이클을 이해해보자

들어가며

react는 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리로, 컴포넌트 기반으로 동작하는데요. 이러한 컴포넌트들은 각자의 라이프 사이클(생명 주기)을 가지고 있습니다. 이번 시간에는 react의 라이프 사이클에 대해 알아보겠습니다.

 

라이프 사이클이란?

라이프 사이클은 컴포넌트가 생성되어 화면에 나타나는 순간부터, 변화가 일어나고, 마침내 화면에서 사라지는 순간까지의 전 과정을 말합니다. 사람의 생애처럼, 컴포넌트도 태어나고, 성장하며 변화하고, 마침내는 사라집니다. 이러한 과정 중에서 각 단계별로 특정한 작업을 수행할 수 있도록 도와주는 것이 라이프 사이클 메서드입니다.

 

react 컴포넌트의 라이프 사이클은 크게 세 가지 단계로 나눌 수 있는데요. 마운트(Mounting), 업데이트(Updating), 언마운트(Unmounting)입니다. 각 단계에서는 특정한 라이프 사이클 메서드가 호출됩니다.

 

마운트(Mounting)

컴포넌트가 처음으로 DOM에 생성되고 삽입되어 화면에 나타나는 단계입니다. 이 단계에서는 다음의 메서드가 차례대로 호출됩니다.

• constructor()
  컴포넌트의 생성자 메서드로, 컴포넌트의 초기 상태를 정의합니다.
• static getDerivedStateFromProps()
  props로부터 state를 업데이트할 필요가 있을 때 사용합니다.
• render()
  컴포넌트를 렌더링 합니다.
• componentDidMount()
  컴포넌트가 DOM에 마운트된 직후에 호출됩니다. 여기서 네트워크 요청, 이벤트 리스너 등의 설정을 할 수 있습니다.

 

업데이트(Updating)

컴포넌트가 리렌더링되는 단계로, props나 state의 변경에 의해 발생합니다. 이 단계에서는 다음의 메서드가 차례대로 호출됩니다.

• static getDerivedStateFromProps()
  props로부터 state를 업데이트할 필요가 있을 때 사용합니다.
• shouldComponentUpdate()
  컴포넌트가 업데이트를 해야 할지 결정합니다. 이 메서드가 false를 반환하면 업데이트 과정은 여기서 중단됩니다.
• render()
  컴포넌트를 렌더링합니다.
• getSnapshotBeforeUpdate()
  업데이트가 일어나기 직전의 DOM 상태를 캡처하는 데 사용됩니다.
• componentDidUpdate()
  컴포넌트가 업데이트된 직후에 호출됩니다.

 

언마운트(Unmounting)

컴포넌트가 DOM에서 제거되어 화면에서 사라지는 단계입니다. 이 단계에서는 다음의 메서드가 호출됩니다.

• componentWillUnmount()
  컴포넌트가 언마운트되기 직전에 호출됩니다. 이 메서드에서는 타이머 해제, 네트워크 요청 취소, 이벤트 리스너 제거 등의 정리 작업을 수행합니다.

 

함수 컴포넌트에서는 어떻게 구현할까?

지금까지 살펴본 라이프 사이클 메서드들은 클래스 컴포넌트에서만 사용할 수 있습니다. 함수 컴포넌트에서는 react hook을 사용해 비슷한 기능을 구현할 수 있습니다.

• constructor()
  클래스 컴포넌트에서는 생성자에서 초기 상태를 설정하거나 이벤트 핸들러를 바인딩하는 것이 일반적입니다. 함수 컴포넌트에서는 useState 훅을 사용하여 상태를 초기화하고, 이벤트 핸들러는 각 함수 내에서 정의합니다.
• componentDidMount()
  컴포넌트가 마운트 된 직후에 실행되는 라이프 사이클 메서드입니다. 함수 컴포넌트에서는 useEffect 훅을 사용합니다.
• componentDidUpdate
  컴포넌트가 업데이트된 후에 실행되는 라이프 사이클 메서드입니다. 함수 컴포넌트에서는 useEffect 훅을 사용합니다. 두 번째 인자로 감시할 값을 전달해 해당 값들이 변경될 때마다 실행되도록 합니다.
• componentWillUnmount
  컴포넌트가 언마운트되기 직전에 실행되는 라이프 사이클 메서드입니다. 함수 컴포넌트에서는 useEffect 훅에서 클린업 함수를 반환하여 언마운트 직전에 실행되도록 합니다.
• shouldComponentUpdate
  컴포넌트가 리렌더링을 해야 할지 결정하는 라이프 사이클 메서드입니다. 함수 컴포넌트에서는 React.memo를 사용하여 props가 변경되지 않았다면 리렌더링을 방지하고 이전 결과를 재사용합니다.
• getDerivedStateFromProps와 getSnapshotBeforeUpdate
  이 두 메서드는 특별한 경우에만 사용되는 라이프 사이클 메서드입니다. 함수 컴포넌트에서는 직접적인 대응 방법이 없으며, 대부분의 경우에는 다른 방법으로 로직을 구현할 수 있습니다.

 

마치며

지금까지 react의 라이프 사이클에 대해서 살펴봤는데요. react의 라이프 사이클을 이해하고, 클래스 컴포넌트와 함수 컴포넌트에서 각각 어떻게 동작하는지를 알면 효율적인 react 애플리케이션을 만드는 데 도움이 될 수 있습니다.

 

지적이나 다른 의견은 언제나 환영합니다 :D

감사합니다.