Redux란? (리덕스)

1. SPA에서 Redux의 개념

• 단일 페이지 응용 프로그램(Single Page Application, SPA)에서 Redux는 상태 관리 라이브러리로써 사용됩니다. SPA는 전통적인 웹사이트와 달리 페이지 이동 없이 동적으로 내용을 업데이트하며, 이로 인해 상태 관리가 복잡해질 수 있습니다. Redux는 중앙 집중화된 상태 저장소를 통해 SPA의 상태를 예측 가능하게 관리하고 변경을 추적하는데 도움을 줍니다.

2. React에서 Redux를 사용하는 방법

React에서 Redux를 사용하기 위해서는 몇 가지 단계를 거쳐야 합니다.

1. Redux 설치하기:
2. npm install redux react-redu
3. 액션(Action) 정의하기: 액션은 상태 변경을 설명하는 객체로, 액션 타입과 필요한 데이터를 가지고 있습니다.
4. 리듀서(Reducer) 정의하기: 리듀서는 이전 상태와 액션을 받아 새로운 상태를 반환하는 순수 함수입니다.
5. 스토어(Store) 생성하기: 리듀서를 결합하고 초기 상태를 가지는 스토어를 생성합니다.
6. 리액트 앱과 연결하기: react-redux 라이브러리를 사용하여 리액트 앱과 Redux 스토어를 연결합니다.

// 예시 코드
// actions.js
export const ADD_TODO = 'ADD_TODO';
export const addTodo = (text) => ({
  type: ADD_TODO,
  text
});

// reducers.js
import { ADD_TODO } from './actions';

const initialState = [];

const todoReducer = (state = initialState, action) => {
  switch (action.type) {
    case ADD_TODO:
      return [...state, { text: action.text, completed: false }];
    default:
      return state;
  }
};

// store.js
import { createStore } from 'redux';
import todoReducer from './reducers';

const store = createStore(todoReducer);

export default store;

// App.js
import React from 'react';
import { Provider } from 'react-redux';
import store from './store';
import TodoList from './TodoList';

function App() {
  return (
    <Provider store={store}>
      <TodoList />
    </Provider>
  );
}

export default App;

3. redux-logger에 대하여

redux-logger는 Redux의 동작을 개발자에게 보여주는 미들웨어입니다. 액션과 이에 따른 상태 변화를 콘솔에 자세하게 기록해줍니다. 개발 중에 상태 변화를 추적하거나 버그를 찾는데 도움을 주며, 개발자 경험을 향상시켜줍니다.

redux-logger 설치 및 사용:

npm install redux-logger

// store.js
import { createStore, applyMiddleware } from 'redux';
import logger from 'redux-logger';
import todoReducer from './reducers';

const store = createStore(todoReducer, applyMiddleware(logger));

export default store;

---