[react] 생명주기 메서드를 이용하여 상태 저장소를 관리하는 방법은 무엇인가요?

22 Dec 2023

react

import React, { Component } from 'react';

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

  componentDidMount() {
    // 여기에서 데이터를 불러오거나 외부 이벤트 구독을 시작할 수 있습니다.
  }

  componentDidUpdate(prevProps, prevState) {
    // 이전 상태와 현재 상태를 비교하여 필요한 작업을 수행할 수 있습니다.
  }

  componentWillUnmount() {
    // 이벤트 구독을 정리하거나 리소스를 해제할 수 있습니다.
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Increment
        </button>
      </div>
    );
  }
}

export default ExampleComponent;

이 예제에서 componentDidMount, componentDidUpdate, componentWillUnmount와 함께 constructor를 사용하여 상태를 관리하고, 상태가 변경될 때마다 UI를 갱신합니다.

상태 저장소를 관리하는 방법은 컴포넌트 및 앱의 요구 사항에 따라 다를 수 있습니다. 위의 예제는 기본적인 상태 관리 방법을 보여주며, 실제 프로젝트에서는 Redux나 Context API 등의 다른 도구를 사용하여 상태를 더 효율적으로 관리할 수도 있습니다.