리액트-Redux 투두리스트 예시

리액트-Redux 투두리스트 예시

Introduction

리액트(React)와 Redux를 사용하여 투두리스트를 만드는 방법을 알아보겠습니다. Redux는 React의 상태 관리를 위한 라이브러리입니다. 이를 사용하면 상태 관리를 보다 쉽게 할 수 있습니다. 투두리스트는 Redux를 사용해보기에 좋은 예시입니다.

Redux란?

Redux는 React의 상태 관리를 위한 라이브러리입니다. Redux를 사용하면 상태를 중앙에서 관리할 수 있습니다. 이는 React에서 상태를 관리하는 것보다 보다 명확하고 쉽게 상태를 관리할 수 있습니다.

투두리스트 만들기

Redux를 사용하여 투두리스트를 만들기 위해서는 기본적으로 세 가지가 필요합니다. 첫째, 액션(Action)이 필요합니다. 액션은 상태를 변경하는데 필요한 정보를 가지고 있습니다. 둘째, 리듀서(Reducer)가 필요합니다. 리듀서는 이전 상태와 액션을 받아서 새로운 상태를 만들어줍니다. 셋째, 스토어(Store)가 필요합니다. 스토어는 상태를 저장하고, 관리하는 역할을 합니다.

액션은 다음과 같이 만들 수 있습니다.

{
  type: 'ADD_TODO',
  text: '리액트-Redux 투두리스트 만들기'
}

리듀서는 다음과 같이 만들 수 있습니다.

const initialState = []

function todos(state = initialState, action) {
  switch (action.type) {
    case 'ADD_TODO':
      return [
        ...state,
        {
          text: action.text,
          completed: false
        }
      ]
    default:
      return state
  }
}

스토어는 다음과 같이 만들 수 있습니다.

import { createStore } from 'redux'
import todos from './todos'

const store = createStore(todos)

결론

React와 Redux를 사용하여 투두리스트를 만드는 방법에 대해 알아보았습니다. Redux를 사용하면 상태 관리를 보다 쉽게 할 수 있습니다. 하지만, Redux를 사용하는 것이 항상 좋은 것은 아닙니다. 프로젝트의 규모가 커지면 Redux를 사용하는 것이 효율적일 수 있지만, 작은 규모의 프로젝트에서는 Redux를 사용하지 않아도 충분히 상태를 관리할 수 있습니다.