[React] 컴포넌트 생명주기 완벽 이해하기 – 실전 예제로 배운다! 🌟

React로 개발하다 보면 "생명주기 메서드"라는 단어를 자주 접하게 될 거예요. 컴포넌트의 생명주기는 React가 컴포넌트를 생성하고 업데이트하고 제거하는 과정을 말하는데요, 이를 통해 컴포넌트의 특정 시점에서 로직을 실행할 수 있어요.

이번 포스팅에서는 클래스형 컴포넌트를 기준으로 생명주기 메서드의 기본 개념부터 실전 예제까지 다뤄볼게요! 함께 알아볼까요? 🧑‍💻

---

반응형

1. 컴포넌트 생명주기란? ⏳

React 컴포넌트는 크게 세 가지 단계로 구분되는 생명주기를 가집니다:

1. 마운트(Mount): 컴포넌트가 처음 화면에 나타나는 단계. 이 단계에서는 초기화 작업이 주로 이루어져요.
2. 업데이트(Update): 컴포넌트가 리렌더링되는 단계. props나 state가 변경되면 UI가 다시 그려집니다.
3. 언마운트(Unmount): 컴포넌트가 화면에서 제거되는 단계. 리소스를 정리하거나 구독을 해제할 때 활용돼요.

각 단계에서 특정 메서드를 사용할 수 있어요. 이 메서드들을 활용하면 컴포넌트의 상태에 따라 필요한 작업을 실행할 수 있답니다! 🧠

---

2. 주요 생명주기 메서드 🌱

1) 마운트 단계

• constructor(): 컴포넌트가 생성될 때 호출됩니다. 초기 state를 설정하거나 메서드를 바인딩하는 데 사용돼요. 하지만 최신 React에서는 초기 state 설정만 필요하다면 constructor를 생략하고 클래스 속성으로 state를 정의하는 방식을 권장합니다.
• componentDidMount(): 컴포넌트가 화면에 렌더링된 직후 호출돼요. API 호출, DOM 조작, 또는 타이머 시작 같은 작업을 수행하기에 최적의 위치입니다.

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

  componentDidMount() {
    fetch('https://api.example.com/data')
      .then((response) => response.json())
      .then((data) => this.setState({ data }));
  }

  render() {
    return <div>{this.state.data ? this.state.data : 'Loading...'}</div>;
  }
}

2) 업데이트 단계

• componentDidUpdate(prevProps, prevState): 컴포넌트가 업데이트된 후 호출됩니다. props나 state의 변경을 감지하고, 변경된 데이터에 따라 추가 작업을 실행할 수 있어요.

componentDidUpdate(prevProps, prevState) {
  if (this.state.value !== prevState.value) {
    console.log('State value updated:', this.state.value);
  }
}

• 업데이트 단계에서는 불필요한 리렌더링을 방지하기 위해 shouldComponentUpdate 메서드를 사용할 수도 있습니다. 하지만 이는 성능 최적화가 필요한 경우에만 사용하는 것이 좋아요.

3) 언마운트 단계

• componentWillUnmount(): 컴포넌트가 제거되기 직전에 호출돼요. 타이머 정리, 구독 해제, 또는 기타 리소스 정리가 필요한 경우에 유용합니다.

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

---

3. 실전 예제 – API 호출과 타이머 앱 만들기 🕰

이제 위의 생명주기 메서드를 활용한 예제를 만들어볼까요? 🎉

API 데이터를 불러오는 예제

간단한 사용자 목록을 표시하는 컴포넌트를 만들어봅시다.

import React from 'react';

class UserList extends React.Component {
  constructor(props) {
    super(props);
    this.state = { users: [], isLoading: true };
  }

  componentDidMount() {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then((response) => response.json())
      .then((data) => this.setState({ users: data, isLoading: false }));
  }

  render() {
    const { users, isLoading } = this.state;

    return (
      <div>
        <h1>User List</h1>
        {isLoading ? (
          <p>Loading...</p>
        ) : (
          <ul>
            {users.map((user) => (
              <li key={user.id}>{user.name}</li>
            ))}
          </ul>
        )}
      </div>
    );
  }
}

export default UserList;

타이머 앱 만들기

이번엔 타이머를 관리하는 컴포넌트를 만들어볼게요.

import React from 'react';

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

  componentDidMount() {
    this.timer = setInterval(() => {
      this.setState((prevState) => ({ seconds: prevState.seconds + 1 }));
    }, 1000);
  }

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

  render() {
    return (
      <div>
        <h1>Timer</h1>
        <p>Elapsed time: {this.state.seconds} seconds</p>
      </div>
    );
  }
}

export default Timer;

---

4. 동작 설명 🎯

API 예제의 흐름

1. 컴포넌트가 화면에 렌더링되면 componentDidMount()에서 API를 호출합니다.
2. 데이터를 성공적으로 받아오면 state를 업데이트하고, UI가 리렌더링됩니다.
3. 데이터가 로드되기 전에는 Loading... 메시지가 표시되고, 로드 완료 후 사용자 목록이 나타납니다.

타이머 앱의 흐름

1. 컴포넌트가 마운트되면 setInterval()로 1초마다 state를 업데이트합니다.
2. 컴포넌트가 언마운트되면 componentWillUnmount()에서 타이머를 정리합니다.
3. 초 단위로 증가하는 타이머가 화면에 표시됩니다.

---

5. 마무리 🎯

생명주기 메서드는 React에서 컴포넌트의 상태와 로직을 효율적으로 관리하기 위한 강력한 도구예요.

이번 포스팅에서는 주로 클래스형 컴포넌트를 다뤘지만, 함수형 컴포넌트에서는 useEffect() 훅을 사용해 비슷한 작업을 수행할 수 있답니다. 이를 통해 클래스형과 함수형 컴포넌트의 차이를 이해할 수도 있어요!

생명주기의 개념과 활용법을 잘 익히면 더 복잡한 앱도 자신 있게 만들어볼 수 있을 거예요! 💪

React 개발의 첫걸음, 생명주기 완벽 정복! 이제 여러분도 전문가처럼 React를 다룰 준비가 되셨나요? 😄