[javascript] Redux와 컴포넌트 라이프사이클(Component Lifecycle)의 연동 방법은?

22 Nov 2023

javascript

Redux를 사용하는 React 애플리케이션에서 컴포넌트 라이프사이클과 Redux 상태를 연동하는 방법에 대해 알아보겠습니다.

1. Redux 상태와 컴포넌트 연결

Redux 상태를 컴포넌트와 연결하기 위해 react-redux 라이브러리의 connect 함수를 사용합니다. 이를 통해 Redux의 상태를 컴포넌트의 props로 전달할 수 있습니다.

예시 코드:

import { connect } from 'react-redux';

function MyComponent(props) {
  // 컴포넌트에서 Redux 상태를 사용하는 로직 작성
}

function mapStateToProps(state) {
  return {
    myState: state.myState // Redux의 상태를 컴포넌트의 props로 연결
  };
}

export default connect(mapStateToProps)(MyComponent);

위의 예시에서 mapStateToProps 함수는 Redux의 상태를 컴포넌트의 props로 매핑하는 역할을 합니다. 컴포넌트에서 필요한 상태값을 반환하면 해당 상태값이 컴포넌트의 props로 전달됩니다.

2. 컴포넌트 라이프사이클 메서드 사용

컴포넌트의 라이프사이클 메서드를 사용하여 Redux와의 상호작용을 구현할 수 있습니다.

예시 코드:

import React from 'react';
import { connect } from 'react-redux';

class MyComponent extends React.Component {
  componentDidMount() {
    // 컴포넌트가 마운트될 때 Redux 액션을 디스패치하여 상태를 변경
  }

  componentDidUpdate(prevProps) {
    // 컴포넌트의 props가 업데이트될 때 Redux 액션을 디스패치하여 상태를 변경
  }

  componentWillUnmount() {
    // 컴포넌트가 언마운트될 때 Redux 상태를 초기화
  }

  render() {
    // 컴포넌트 렌더링
  }
}

export default connect(mapStateToProps)(MyComponent);

위의 예시에서 componentDidMount 메서드는 컴포넌트가 마운트되었을 때 실행되는 메서드입니다. 여기서 Redux 액션을 디스패치하여 Redux 상태를 변경할 수 있습니다. componentDidUpdate 메서드는 컴포넌트의 props가 업데이트될 때 실행되는 메서드로, Redux 상태를 업데이트하는데 활용할 수 있습니다. componentWillUnmount 메서드는 컴포넌트가 언마운트되기 전에 실행되는 메서드로, 여기서 Redux 상태를 초기화하거나 정리 작업을 수행할 수 있습니다.

1. Redux 상태와 컴포넌트 연결

2. 컴포넌트 라이프사이클 메서드 사용

참고 자료