React의 컴포넌트 생명주기(Lifecycle)는 컴포넌트가 생성(mount), 업데이트(update), 제거(unmount)될 때 React가 호출하는 일련의 메서드입니다.

컴포넌트 생명주기를 이해하면 컴포넌트가 언제 렌더링되는지, 언제 데이터를 불러올지, 언제 자원을 정리할지 등을 명확하게 이해하고 관리할 수 있습니다.

✅ 생명주기(Lifecycle)란?

컴포넌트가 DOM에 나타나고(mount), 업데이트되고(update), 사라질 때(unmount), React는 특정 메서드를 호출합니다.

크게 세 가지 단계로 나뉩니다:

Mounting (생성)
Updating (업데이트)
Unmounting (제거)

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

함수 컴포넌트는 Hooks(useEffect)로 관리하며, 클래스 컴포넌트에서만 lifecycle 메서드를 직접 사용합니다.

React 컴포넌트의 대표적인 생명주기 메서드는 다음과 같습니다:

Mounting(생성 및 추가) : constructor(), render(), componentDidMount()
Updating(업데이트) : shouldComponentUpdate(), componentDidUpdate()
Unmounting(제거) : componentWillUnmount()

🔷 각 생명주기 단계의 동작 원리

📌 1. Mounting (생성 단계)

컴포넌트가 처음 DOM에 추가될 때 실행되는 단계입니다.

순서는 다음과 같습니다:

constructor
getDerivedStateFromProps
render
componentDidMount

보통 초기 상태 설정, API 호출, 외부 데이터 가져오기를 합니다.

1class MyComponent extends React.Component {
2  constructor(props) {
3    super(props);
4    this.state = { count: 0 }; // 상태 초기화
5  }
6
7  static getDerivedStateFromProps(props, state) {
8    // 상태 초기화 또는 변경 시 props에 따라 업데이트
9    return null; // 변경 없으면 null 반환
10  }
11
12  componentDidMount() {
13    // DOM 생성 후 호출되는 메서드 (API 요청 등 초기화 작업)
14    console.log('Component mounted!');
15  }
16
17  render() {
18    return <h1>{this.state.count}</h1>;
19  }
20}

📌 2. Updating (업데이트 단계)

컴포넌트의 상태(state)나 props가 변경될 때 실행됩니다.

순서는 다음과 같습니다:

getDerivedStateFromProps
shouldComponentUpdate
render
getSnapshotBeforeUpdate
componentDidUpdate

1shouldComponentUpdate(nextProps, nextState) {
2  // 업데이트 여부 결정
3  return nextState.count !== this.state.count;
4}
5
6componentDidUpdate(prevProps, prevState, snapshot) {
7  // DOM 업데이트 이후 호출됨
8  console.log('Component updated!');
9}

shouldComponentUpdate에서 false를 리턴하면 업데이트를 막을 수 있습니다.
componentDidUpdate는 DOM 업데이트 후 호출되어, 업데이트 후 처리(예: 데이터 재요청)에 사용됩니다.

📌 3. Unmounting (제거 단계)

컴포넌트가 DOM에서 제거될 때 호출되는 메서드입니다.

이 단계는 메서드가 하나뿐입니다:

componentWillUnmount

1componentWillUnmount() {
2  // 이벤트 리스너 정리, 타이머 제거 등 리소스 정리
3  console.log('Component unmounted!');
4}

📌 생명주기 메서드 사용 예시 코드

다음은 각 단계를 명확하게 이해할 수 있도록 작성한 클래스형 컴포넌트 예시입니다.

1import React from 'react';
2
3class LifecycleExample extends React.Component {
4  constructor(props) {
5    super(props);
6    this.state = { count: 0 };
7    console.log('constructor');
8  }
9
10  static getDerivedStateFromProps(props, state) {
11    console.log('getDerivedStateFromProps');
12    return null;
13  }
14
15  componentDidMount() {
16    console.log('componentDidMount');
17  }
18
19  shouldComponentUpdate(nextProps, nextState) {
20    console.log('shouldComponentUpdate');
21    return true; // 항상 업데이트
22  }
23
24  getSnapshotBeforeUpdate(prevProps, prevState) {
25    console.log('getSnapshotBeforeUpdate');
26    return null; // 스냅샷 값 반환 가능
27  }
28
29  componentDidUpdate(prevProps, prevState, snapshot) {
30    console.log('componentDidUpdate');
31  }
32
33  componentWillUnmount() {
34    console.log('componentWillUnmount');
35  }
36
37  increment = () => {
38    this.setState({ count: this.state.count + 1 });
39  };
40
41  render() {
42    console.log('render');
43    return (
44      <div>
45        <p>Count: {this.state.count}</p>
46        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
47          증가
48        </button>
49      </div>
50    );
51  }
52}
53
54export default LifecycleExample;

로그 순서 예시:

constructor
getDerivedStateFromProps
render
componentDidMount

(상태 변경 시)
getDerivedStateFromProps
shouldComponentUpdate
render
getSnapshotBeforeUpdate
componentDidUpdate

📌 Hooks로 구현 시 (함수형 컴포넌트)

최근 React는 함수형 컴포넌트와 훅(useEffect)을 사용합니다.

클래스 컴포넌트의 생명주기는 함수 컴포넌트에서 다음과 같이 표현됩니다:

1import React, { useState, useEffect } from 'react';
2
3function LifecycleExample() {
4  const [count, setCount] = useState(0);
5
6  // Mount (componentDidMount)
7  useEffect(() => {
8    console.log('Component Mounted');
9
10    // Unmount 단계에서 실행될 정리함수 반환
11    return () => {
12      console.log('Component will unmount');
13    };
14  }, []);
15
16  // count가 변경될 때마다 실행 (componentDidUpdate와 유사)
17  useEffect(() => {
18    console.log('Component updated:', count);
19  }, [count]);
20
21  return (
22    <div>
23      <h1>Count: {count}</h1>
24      <button onClick={() => setCount(count + 1)}>증가</button>
25    </div>
26  );
27}

📌 정리

React 컴포넌트는 Mount, Update, Unmount 단계에 따라 특정 메서드를 호출하여 동작합니다.

Mount 단계에서는 초기화 작업과 데이터 로드를 수행합니다.
Update 단계에서는 UI가 최신 상태로 유지되도록 업데이트 여부를 결정합니다.
Unmount 단계에서는 리소스를 정리하고 메모리 누수를 방지합니다.

생명주기 메서드 및 훅(useEffect)을 적절히 활용하면 React 컴포넌트가 효율적으로 관리됩니다.

SNS 서비스를 예로 들어 React의 컴포넌트 생명주기(Lifecycle) 원리를 쉽게 설명해 보겠습니다.

아래는 SNS에서 흔히 볼 수 있는 피드(Feed) 컴포넌트를 예로 들어 생명주기 메서드를 설명한 것입니다.

SNS 앱을 생각하면, 다음과 같은 과정이 일어납니다:

처음 피드를 로딩할 때 (Mount)
사용자가 새 게시물을 작성하거나 스크롤하여 데이터를 더 불러올 때 (Update)
다른 화면으로 이동하거나 앱을 종료할 때 (Unmount)

🔷 1단계: Mount (피드 컴포넌트 생성)

피드 컴포넌트가 처음 화면에 나타나는 시점입니다.

이때 필요한 작업:

서버에서 최신 게시물 목록 가져오기 (API 호출)
초기 화면 설정 (데이터가 오기 전 로딩 화면)

📌 Mount 단계에서의 주요 메서드

constructor
상태(state) 초기 설정 (게시물 목록, 로딩 상태 등)
render
컴포넌트의 초기 UI 렌더링 (로딩 화면 등)
componentDidMount
서버에서 실제 게시물 데이터를 받아옴 (API 요청)

▶️ 예제 코드

1class FeedComponent extends React.Component {
2  constructor(props) {
3    super(props);
4    this.state = {
5      posts: [],          // 게시물 목록 초기화
6      loading: true,      // 로딩 상태 관리
7    };
8  }
9
10  componentDidMount() {
11    // 컴포넌트가 화면에 등장한 후 데이터 요청
12    fetch('/api/posts')
13      .then(res => res.json())
14      .then(data => this.setState({ posts: data, loading: false }));
15  }
16
17  render() {
18    if (this.state.loading) {
19      return <div>Loading...</div>;
20    }
21    return (
22      <div>
23        {this.state.posts.map(post => (
24          <Post key={post.id} data={post} />
25        ))}
26      </div>
27    );
28  }
29}

🔷 2단계: Update (피드 컴포넌트 업데이트)

사용자가 피드에서 새로운 게시물을 작성하거나, 스크롤하여 다음 게시물 목록을 불러올 때 이 단계가 발생합니다.

이때 필요한 작업:

업데이트된 상태(state)에 따라 다시 렌더링
필요 시 서버에서 추가 데이터를 요청

📌 Update 단계에서의 주요 메서드

shouldComponentUpdate
불필요한 렌더링을 막기 위해, 실제 변경이 있을 때만 업데이트 결정
render
업데이트된 상태를 화면에 다시 그립니다.
componentDidUpdate
데이터 변경이 발생하면 추가 작업(API 재요청 등)을 수행합니다.

▶️ 예제 코드 (새로운 게시물 추가)

1componentDidUpdate(prevProps, prevState) {
2  if (prevState.posts.length !== this.state.posts.length) {
3    console.log('새로운 게시물이 추가되었습니다.');
4  }
5}
6
7handleNewPost = (newPost) => {
8  this.setState(prevState => ({
9    posts: [newPost, ...prevState.posts],
10  }));
11};

이 과정에서 사용자가 새 게시물을 올리면 상태(state.posts)가 변경되고,

컴포넌트는 자동으로 **render() → componentDidUpdate()**를 실행하여 UI를 갱신합니다.

🔷 3단계: Unmount (피드 컴포넌트 제거)

사용자가 다른 화면(예: 프로필, 설정)으로 이동하거나 앱을 종료할 때, 피드 컴포넌트가 화면에서 제거되는 단계입니다.

이때 필요한 작업:

타이머, 이벤트 리스너 제거
불필요한 요청 취소 (메모리 누수 방지)

📌 Unmount 단계에서의 주요 메서드

componentWillUnmount
이벤트 리스너 및 리소스 정리

▶️ 예제 코드 (이벤트 리스너 제거)

1componentDidMount() {
2  window.addEventListener('scroll', this.handleScroll);
3}
4
5componentWillUnmount() {
6  window.removeEventListener('scroll', this.handleScroll);
7  console.log('피드 컴포넌트가 화면에서 제거됨.');
8}
9
10handleScroll = () => {
11  // 무한스크롤 처리 로직
12};

피드의 무한 스크롤 기능을 구현할 때, 컴포넌트가 제거되면 반드시 이벤트 리스너를 정리하여 메모리 누수를 막아야 합니다.

📌 함수형 컴포넌트에서의 구현 (useEffect 활용)

최근에는 함수형 컴포넌트를 사용하는 경우가 많습니다.

함수형 컴포넌트의 생명주기 관리에는 useEffect 훅을 사용합니다.

▶️ 함수형 예제 (Mount, Update, Unmount 모두 처리)

1import React, { useState, useEffect } from 'react';
2
3function FeedComponent() {
4  const [posts, setPosts] = useState([]);
5  const [loading, setLoading] = useState(true);
6
7  useEffect(() => {
8    // Mount (생성 단계)
9    fetch('/api/posts')
10      .then(res => res.json())
11      .then(data => {
12        setPosts(data);
13        setLoading(false);
14      });
15
16    // Unmount (제거 단계)
17    return () => {
18      console.log('Feed 컴포넌트 제거됨');
19    };
20  }, []); // 빈 배열([])은 마운트와 언마운트 때만 실행됨
21
22  useEffect(() => {
23    // Update (업데이트 단계)
24    console.log('게시물 목록이 업데이트됨:', posts.length);
25  }, [posts]); // posts 상태가 변경될 때만 실행됨
26
27  if (loading) {
28    return <div>Loading...</div>;
29  }
30
31  return (
32    <div>
33      {posts.map(post => (
34        <Post key={post.id} data={post} />
35      ))}
36    </div>
37  );
38}

Mount 시 데이터 로딩
게시물 목록(posts)이 변경될 때마다 업데이트 로직 실행
컴포넌트 제거 시(Unmount) 리소스 정리

컴포넌트 생명주기

✅ 생명주기(Lifecycle)란?

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

🔷 각 생명주기 단계의 동작 원리

📌 1. Mounting (생성 단계)

📌 2. Updating (업데이트 단계)

📌 3. Unmounting (제거 단계)

📌 생명주기 메서드 사용 예시 코드

📌 Hooks로 구현 시 (함수형 컴포넌트)

📌 정리

✅ SNS 앱의 피드 컴포넌트 생명주기 예시

🔷 1단계: Mount (피드 컴포넌트 생성)

🔷 2단계: Update (피드 컴포넌트 업데이트)

🔷 3단계: Unmount (피드 컴포넌트 제거)

📌 함수형 컴포넌트에서의 구현 (useEffect 활용)