Redux란?

Redux는 JavaScript 애플리케이션의 상태를 관리하기 위한 상태 관리 라이브러리입니다.

Redux를 사용하면 애플리케이션의 상태를 예측 가능하게 만들고, 상태의 변화를 추적하고, 상태를 쉽게 업데이트할 수 있습니다.

Redux는 React와 함께 사용되는 것이 일반적이지만 다른 라이브러리나 프레임워크에서도 사용할 수 있습니다.

---

Redux의 주요 개념은 다음과 같습니다:

스토어 (Store)

• 애플리케이션의 상태를 포함하고 있는 객체입니다.
  스토어에는 상태의 값이 들어 있습니다.

액션 (Action)

• 상태를 변경하는데 필요한 정보를 가지고 있는 객체입니다.
  액션은 주로 어떤 종류의 변화가 일어났는지 설명하는 문자열 형태의 type 속성을 가지고 있습니다.

리듀서 (Reducer)

• 현재의 상태와 액션을 받아서 새로운 상태를 반환하는 함수입니다.
  리듀서는 순수 함수여야 하며 이전 상태를 변경하지 않아야 합니다.

디스패치 (Dispatch)

• 액션을 스토어에 보내는 것을 의미합니다.
  액션을 디스패치하면 스토어는 현재의 상태와 액션을 리듀서에게 전달하여 새로운 상태를 생성합니다.

구독 (Subscribe)

• 스토어의 상태가 변경될 때마다 특정 함수를 호출하는 것을 의미합니다.
  이를 통해 상태 변화에 대응할 수 있습니다.

아래에 Redux의 간단한 코드 예시를 제공합니다.

---

1. 설치 및 설정

먼저, 프로젝트에 Redux를 설치합니다.

npm install redux react-redux

---

2. Redux 스토어 생성

// src/store.js

import { createStore } from 'redux';

const initialState = {
  count: 0
};

function reducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'DECREMENT':
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
}

const store = createStore(reducer);

export default store;

---

3. 액션 정의

// src/actions.js

export const increment = () => {
  return {
    type: 'INCREMENT'
  };
};

export const decrement = () => {
  return {
    type: 'DECREMENT'
  };
};

---

4. 리액트 컴포넌트에서 사용

// src/App.js

import React from 'react';
import { connect } from 'react-redux';
import { increment, decrement } from './actions';

function App(props) {
  return (
    <div>
      <h1>Count: {props.count}</h1>
      <button onClick={props.increment}>Increment</button>
      <button onClick={props.decrement}>Decrement</button>
    </div>
  );
}

const mapStateToProps = state => {
  return {
    count: state.count
  };
};

export default connect(mapStateToProps, { increment, decrement })(App);

---

이 예시에서는 간단한 카운터 앱을 만들었습니다.
redux 패키지를 사용하여 스토어를 생성하고, 액션을 정의하였습니다.

그리고 리액트 컴포넌트에서 스토어의 상태를 사용하고 액션을 디스패치하기 위해 react-redux의 connect 함수를 사용했습니다.