Redux Thunk를 이용한 데이트 피커 구현 예제

18 Oct 2023

redux

이번 블로그 포스트에서는 Redux Thunk를 활용하여 데이트 피커를 구현하는 예제를 다루어 보겠습니다. Redux Thunk는 Redux 애플리케이션에서 비동기 작업을 처리하기 위한 미들웨어로 사용됩니다.

1. 프로젝트 설정

먼저, 새로운 프로젝트를 생성하고 Redux와 Redux Thunk 패키지를 설치합니다. 다음 명령어를 사용하면 됩니다.

npx create-react-app date-picker-app
cd date-picker-app
npm install redux redux-thunk

2. 액션 타입 정의하기

데이트 피커에서 사용될 액션 타입을 정의합니다. src/actions/types.js 파일을 생성하고 다음과 같이 내용을 작성합니다.

export const SET_DATE = 'SET_DATE';

3. 액션 생성자 함수 만들기

다음으로, 액션 생성자 함수를 작성합니다. src/actions/dateActions.js 파일을 생성하고 다음과 같이 내용을 작성합니다.

import { SET_DATE } from './types';

export const setDate = (date) => {
  return {
    type: SET_DATE,
    payload: date
  };
};

4. 리듀서 작성하기

액션에 따라 상태를 업데이트하는 리듀서를 작성합니다. src/reducers/dateReducer.js 파일을 생성하고 다음과 같이 내용을 작성합니다.

import { SET_DATE } from '../actions/types';

const initialState = new Date();

const dateReducer = (state = initialState, action) => {
  switch (action.type) {
    case SET_DATE:
      return action.payload;
    default:
      return state;
  }
};

export default dateReducer;

5. 스토어 설정하기

Redux 스토어를 설정합니다. src/store.js 파일을 생성하고 다음과 같이 내용을 작성합니다.

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import dateReducer from './reducers/dateReducer';

const store = createStore(dateReducer, applyMiddleware(thunk));

export default store;

6. 컴포넌트 만들기

데이트 피커 컴포넌트를 작성합니다. src/components/DatePicker.js 파일을 생성하고 다음과 같이 내용을 작성합니다.

import React, { useState } from 'react';
import { connect } from 'react-redux';
import { setDate } from '../actions/dateActions';

const DatePicker = (props) => {
  const [date, setDate] = useState('');

  const handleDateChange = (e) => {
    setDate(e.target.value);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    props.setDate(date);
  };

  return (
    <div>
      <h2>Date Picker</h2>
      <form onSubmit={handleSubmit}>
        <input type="date" value={date} onChange={handleDateChange} />
        <button type="submit">Set Date</button>
      </form>
    </div>
  );
};

export default connect(null, { setDate })(DatePicker);

7. 루트 컴포넌트 수정하기

앱의 루트 컴포넌트를 수정하여 데이트 피커 컴포넌트를 렌더링합니다. src/App.js 파일을 열고 다음과 같이 내용을 수정합니다.

import React from 'react';
import DatePicker from './components/DatePicker';

function App() {
  return (
    <div>
      <h1>Date Picker App</h1>
      <DatePicker />
    </div>
  );
}

export default App;

8. 어플리케이션 실행하기

마지막으로, 어플리케이션을 실행해 데이트 피커를 사용해보세요. 프로젝트의 루트 디렉토리에서 다음 명령어를 입력해 실행할 수 있습니다.

npm start

마무리

이번 블로그 포스트에서는 Redux Thunk를 이용하여 데이트 피커를 구현하는 예제를 다뤘습니다. Redux Thunk를 통해 비동기 작업을 효과적으로 관리할 수 있으며, 데이트 피커 컴포넌트를 통해 사용자가 날짜를 선택하는 기능을 구현할 수 있습니다.

더 자세한 사항은 Redux 공식 문서를 참고해주세요.

#redux #redux-thunk ```