React 컴포넌트의 생명주기 이해하기

 

React는 컴포넌트 기반 라이브러리로, 각 컴포넌트는 특정 시점에서 다양한 상태 변화와 동작을 수행합니다. 이를 **컴포넌트의 생명주기(Lifecycle)**라고 부릅니다. React에서 컴포넌트의 생명주기를 깊이 이해하면, 애플리케이션 성능을 최적화하고 예측 가능한 방식으로 동작하도록 설계할 수 있습니다. 이번 글에서는 React 컴포넌트의 생명주기에 대해 상세히 살펴보겠습니다.

---

컴포넌트 생명주기의 큰 흐름

React 컴포넌트는 크게 다음 세 가지 단계로 구성된 생명주기를 가지고 있습니다.

1. 마운트(Mount): 컴포넌트가 처음으로 DOM에 삽입될 때 발생하는 단계입니다.
2. 업데이트(Update): 상태(state)나 속성(props)이 변경되어 컴포넌트가 다시 렌더링될 때 발생합니다.
3. 언마운트(Unmount): 컴포넌트가 DOM에서 제거될 때 발생하는 단계입니다.

각 단계에서 특정 메서드나 이벤트가 실행되며, 이를 적절히 활용하여 원하는 동작을 구현할 수 있습니다.

---

클래스 컴포넌트에서의 생명주기 메서드

React에서는 함수형 컴포넌트와 클래스형 컴포넌트를 사용할 수 있습니다. 클래스 컴포넌트는 생명주기 메서드를 명시적으로 제공하여 생명주기를 보다 직관적으로 관리할 수 있습니다.

1. 마운트 단계

마운트 단계는 컴포넌트가 초기화되고 DOM에 추가되는 과정입니다. 이 단계에서 호출되는 주요 메서드는 다음과 같습니다:

• constructor(props):
  컴포넌트의 초기 상태를 설정하고, props를 사용할 준비를 합니다.
• class MyComponent extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; } }
• static getDerivedStateFromProps(props, state):
  props로부터 state를 업데이트할 수 있는 정적 메서드입니다. 잘 사용되진 않지만, 특정 조건에서 유용합니다.
• render():
  컴포넌트가 화면에 어떻게 보일지 정의하는 필수 메서드입니다.
• componentDidMount():
  컴포넌트가 DOM에 추가된 후 실행됩니다. 여기에서 API 호출, 구독 설정, 타이머 설정 등 초기화 작업을 수행합니다.
• componentDidMount() { console.log("컴포넌트가 마운트되었습니다."); }

---

2. 업데이트 단계

업데이트 단계는 컴포넌트가 다시 렌더링될 때 발생하며, 이는 props나 state의 변화로 인해 트리거됩니다. 다음 메서드들이 호출됩니다:

• static getDerivedStateFromProps(props, state):
  마운트 단계와 동일한 방식으로 호출됩니다.
• shouldComponentUpdate(nextProps, nextState):
  렌더링 여부를 결정하는 메서드입니다. 불필요한 렌더링을 방지하여 성능을 최적화할 수 있습니다.
• shouldComponentUpdate(nextProps, nextState) { return this.props.value !== nextProps.value; }
• render():
  컴포넌트를 다시 렌더링합니다.
• getSnapshotBeforeUpdate(prevProps, prevState):
  DOM이 업데이트되기 직전에 호출되며, 이전 상태를 기반으로 값을 캡처할 수 있습니다.
• componentDidUpdate(prevProps, prevState, snapshot):
  DOM 업데이트 후 호출되며, 네트워크 요청이나 DOM 조작과 같은 작업에 유용합니다.
• componentDidUpdate(prevProps) { if (prevProps.id !== this.props.id) { this.fetchData(this.props.id); } }

---

3. 언마운트 단계

언마운트 단계는 컴포넌트가 DOM에서 제거될 때 발생합니다.

• componentWillUnmount():
  타이머 제거, 구독 해제, 정리 작업 등을 수행합니다.

  componentWillUnmount() {
    console.log("컴포넌트가 언마운트되었습니다.");
  }
  

---

함수형 컴포넌트에서의 생명주기

React의 최신 버전에서는 함수형 컴포넌트와 Hooks를 사용하여 생명주기를 관리할 수 있습니다. 대표적인 Hook은 다음과 같습니다:

• useEffect:
  여러 생명주기 메서드의 기능을 하나로 통합한 Hook입니다.useEffect는 두 번째 인자로 의존성 배열을 받아, 특정 조건에서만 실행되도록 설정할 수 있습니다.
• import React, { useEffect, useState } from "react"; function MyComponent() { const [count, setCount] = useState(0); useEffect(() => { console.log("컴포넌트가 마운트되었습니다."); return () => { console.log("컴포넌트가 언마운트되었습니다."); }; }, []); useEffect(() => { console.log("상태가 업데이트되었습니다."); }, [count]); return <div>{count}</div>; }

---

생명주기 메서드와 React 최적화

컴포넌트의 생명주기를 적절히 활용하면 성능 최적화에 도움이 됩니다. 특히 다음을 고려하세요:

1. 불필요한 렌더링 방지:
   shouldComponentUpdate 또는 React.memo를 사용해 렌더링을 최소화합니다.
2. 리소스 관리:
   componentWillUnmount와 useEffect의 클린업 함수를 활용해 메모리 누수를 방지합니다.
3. 비동기 작업 관리:
   componentDidMount와 useEffect를 통해 API 호출과 데이터를 효율적으로 처리합니다.

---

결론

React 컴포넌트의 생명주기는 컴포넌트가 시작되고 끝날 때까지의 흐름을 명확히 이해하도록 돕습니다. 클래스 컴포넌트와 함수형 컴포넌트의 생명주기를 잘 활용하면 코드의 가독성과 성능이 향상됩니다. 최신 React에서는 함수형 컴포넌트와 Hook이 주요 방식으로 자리 잡았지만, 기존 프로젝트에서 클래스를 유지해야 하는 경우도 있으므로 두 방식 모두 이해하는 것이 중요합니다.

이제 여러분의 프로젝트에서 React 컴포넌트의 생명주기를 적극 활용해 보세요! 😊