Redux를 사용하는 방법: 가장 기초적인 코드 예제와 함께 설명하기

다음은 Redux를 사용하는 방법을 코드 예제와 함께 설명하겠습니다.

1. 필요한 패키지 설치

Redux를 사용하기 위해 먼저 필요한 패키지를 설치해야 합니다. npm을 사용하여 패키지를 설치할 수 있습니다.

npm install redux react-redux

2. 액션 타입 정의하기

먼저 액션의 타입을 정의해야 합니다. 액션 타입은 문자열 형태로 정의되며, 상태 변경을 식별하는 데 사용됩니다.

// actions.js

export const ADD_TODO = 'ADD_TODO';
export const DELETE_TODO = 'DELETE_TODO';

3. 액션 생성자 함수 작성하기

액션 생성자 함수는 액션 객체를 생성하여 반환하는 함수입니다. 액션 객체에는 type과 필요한 추가 정보가 포함됩니다.

// actions.js

export function addTodo(text) {
  return {
    type: ADD_TODO,
    payload: {
      text
    }
  };
}

export function deleteTodo(id) {
  return {
    type: DELETE_TODO,
    payload: {
      id
    }
  };
}

4. 초기 상태 및 리듀서 작성하기

Redux에서는 상태를 단일 저장소로 관리합니다. 초기 상태와 상태 변경을 처리하는 리듀서 함수를 작성해야 합니다.

// reducer.js

const initialState = {
  todos: []
};

export function todoReducer(state = initialState, action) {
  switch (action.type) {
    case ADD_TODO:
      return {
        ...state,
        todos: [...state.todos, action.payload]
      };
    case DELETE_TODO:
      return {
        ...state,
        todos: state.todos.filter(todo => todo.id !== action.payload.id)
      };
    default:
      return state;
  }
}

5. 스토어 생성하기

Redux에서는 애플리케이션의 상태를 단일 저장소로 관리합니다. 이를 위해 Redux 스토어를 생성해야 합니다.

// store.js

import { createStore } from 'redux';
import { todoReducer } from './reducer';

const store = createStore(todoReducer);

6. 컴포넌트와 Redux 연결하기

Redux와 컴포넌트를 연결하여 상태를 관리할 수 있습니다. react-redux의 connect 함수를 사용하여 컴포넌트를 Redux에 연결합니다.

// TodoList.js

import React from 'react';
import { connect } from 'react-redux';
import { addTodo, deleteTodo } from './actions';

class TodoList extends React.Component {
  handleAddTodo = () => {
    const { dispatch } = this.props;
    dispatch(addTodo('새로운 할 일'));
  };

  handleDeleteTodo = (id) => {
    const { dispatch } = this.props;
    dispatch(deleteTodo(id));
  };

  render() {
    const { todos } = this.props;
    return (
      <div>
        <button onClick={this.handleAddTodo}>할 일 추가</button>
        <ul>
          {todos.map(todo => (
            <li key={todo.id}>
              {todo.text}
              <button onClick={() => this.handleDeleteTodo(todo.id)}>삭제</button>
            </li>
          ))}
        </ul>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    todos: state.todos
  };
}

export default connect(mapStateToProps)(TodoList);

위의 예제에서 TodoList 컴포넌트는 Redux와 연결되어 상태를 관리합니다. mapStateToProps 함수를 사용하여 상태를 컴포넌트의 props로 매핑하고, connect 함수를 사용하여 컴포넌트를 Redux에 연결합니다.

7. 애플리케이션에 스토어 적용하기

마지막으로 애플리케이션에 Redux 스토어를 적용해야 합니다.

// index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import { todoReducer } from './reducer';
import TodoList from './TodoList';

const store = createStore(todoReducer);

ReactDOM.render(
  <Provider store={store}>
    <TodoList />
  </Provider>,
  document.getElementById('root')
);

Provider 컴포넌트를 사용하여 애플리케이션에 Redux 스토어를 제공합니다.

이제 Redux를 사용하여 상태를 관리하는 예제를 작성하였습니다.