React 생명 주기 함수(Lifecycle Methods)

React 생명 주기 함수란?

▶ React 컴포넌트는 생성, 업데이트, 소멸의 과정을 거치는데, 이 과정을 생명 주기(Lifecycle)라고 합니다.
생명 주기 동안 특정 시점에 자동으로 호출되는 함수들이 있으며, 이를 생명 주기 함수(Lifecycle Methods)라고 합니다. 생명 주기 함수는 주로 클래스 컴포넌트에서 사용되지만, 함수 컴포넌트에서도 훅(Hooks)을 통해 유사한 기능을 구현할 수 있습니다.

생명 주기 함수의 단계

React 생명 주기는 크게 세 가지 단계로 나눌 수 있습니다:

1. 마운팅(Mounting): 컴포넌트가 DOM에 삽입되는 단계
2. 업데이트(Updating): 컴포넌트가 업데이트되는 단계
3. 언마운팅(Unmounting): 컴포넌트가 DOM에서 제거되는 단계

마운팅 단계

01. constructor()

• 컴포넌트가 생성될 때 호출되며, 초기 상태를 설정하는 데 사용됩니다.

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
}

02. static getDerivedStateFromProps()

• props로부터 상태를 업데이트해야 할 때 사용됩니다. 드물게 사용되며, 컴포넌트가 마운트되거나 업데이트되기 전에 호출됩니다.

static getDerivedStateFromProps(nextProps, prevState) {
  if (nextProps.value !== prevState.value) {
    return { value: nextProps.value };
  }
  return null;
}

03. render()

• React 요소를 반환하며, 컴포넌트의 UI를 정의합니다. 순수 함수로, 상태나 props에 따라 동일한 출력을 반환해야 합니다.

render() {
  return <div>{this.state.count}</div>;
}

04. componentDidMount()

• 컴포넌트가 DOM에 삽입된 직후에 호출됩니다. 여기서 API 호출, DOM 조작 등을 수행할 수 있습니다.

componentDidMount() {
  // 데이터 가져오기 예시
  fetch('/api/data')
    .then(response => response.json())
    .then(data => this.setState({ data }));
}

업데이트 단계

01. static getDerivedStateFromProps()

• 마운팅 단계에서와 동일하게, 업데이트 시에도 호출됩니다.

02. shouldComponentUpdate()

• 새로운 props나 상태를 받아 컴포넌트를 다시 렌더링할지 결정합니다. 성능 최적화를 위해 사용됩니다.

shouldComponentUpdate(nextProps, nextState) {
  return nextState.count !== this.state.count;
}

03. render()

• 컴포넌트를 다시 렌더링합니다.

04. getSnapshotBeforeUpdate()

• DOM이 실제로 업데이트되기 직전에 호출되며, 업데이트 전의 DOM 상태를 캡처하여 나중에 사용할 수 있습니다.

getSnapshotBeforeUpdate(prevProps, prevState) {
  if (prevProps.scrollPosition !== this.props.scrollPosition) {
    return this.divRef.scrollHeight;
  }
  return null;
}

05. componentDidUpdate()

• 컴포넌트가 업데이트된 직후에 호출됩니다. 이전 상태나 props에 접근할 수 있으며, 업데이트 후의 작업을 수행할 수 있습니다.

componentDidUpdate(prevProps, prevState, snapshot) {
  if (snapshot !== null) {
    this.divRef.scrollTop = this.divRef.scrollHeight - snapshot;
  }
}

언마운팅 단계

01. componentWillUnmount()

• 컴포넌트가 DOM에서 제거되기 직전에 호출됩니다. 여기서 타이머 제거, 구독 해제 등 정리 작업을 수행할 수 있습니다.

componentWillUnmount() {
  clearInterval(this.timerID);
}

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

• 함수 컴포넌트에서는 훅(Hooks)을 사용하여 생명 주기와 유사한 기능을 구현할 수 있습니다. 대표적으로 useEffect 훅이 있으며, 이는 componentDidMount, componentDidUpdate, componentWillUnmount의 역할을 모두 수행할 수 있습니다.

import React, { useState, useEffect } from "react";

function MyFunctionalComponent() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // 컴포넌트가 마운트될 때 수행
    console.log("Component mounted");

    // 컴포넌트가 언마운트될 때 수행
    return () => {
      console.log("Component will unmount");
    };
  }, []);

  useEffect(() => {
    // count가 변경될 때마다 수행
    console.log("Count updated:", count);
  }, [count]);

  return <div>{count}</div>;
}

결론

▶ React 생명 주기 함수는 컴포넌트의 생성, 업데이트, 소멸 과정에서 특정 작업을 수행할 수 있게 해줍니다.
클래스 컴포넌트에서는 생명 주기 메서드를 사용하고, 함수 컴포넌트에서는 훅을 사용하여 동일한 기능을 구현할 수 있습니다. 생명 주기 함수를 잘 이해하고 적절히 활용하면, 더 나은 컴포넌트 설계와 관리가 가능합니다.

이렇게 오늘은 React 생명 주기 함수에 대해 알아봤는데요,
생명 주기 함수를 잘 이해하고 활용하면, 리액트 컴포넌트를 더욱 효율적으로 관리할 수 있습니다. 그렇다면 저는 다음에 또 다른 유익한 내용을 들고 오도록 하겠습니다 😁!