Redux를 간단하게 알아보자

 

🥯 애피타이저

 

Redux란?

Redux는 애플리케이션의 상태를 전역으로 관리하는 데 사용되는 오픈소스 JavaScript 라이브러리입니다.

React와 함께 사용되기도 하지만, 다른 라이브러리나 프레임워크와도 사용할 수 있습니다.

 

---

Redux를 사용하는 이유

하나의 Store를 이용하기 때문에 애플리케이션의 상태를 쉽게 추적하고 변경할 수 있고, Props Drilling을 방지하여 손쉬운 상태 전달과 업데이트가 가능하여 코드의 유지 보수성을 높이고 효율성을 극대화할 수 있습니다.

또한 미들웨어라는 기능을 제공하여 비동기 작업을 효율적으로 처리할 수 있습니다. 

 

---

Redux의 세 가지 원칙

 

Single source of truth

하나의 중앙 집중화된 Store에서 데이터를 관리합니다.

 

State is read-only

Action 객체를 통해 상태를 변경할 수 있지만, 상태를 직접적으로 수정할 수는 없습니다.

 

Changes are mad with pure functions

Reducer 함수는 이전 상태와 Action 객체를 받아서 새로운 상태를 반환하는 순수 함수여야 합니다.
상태의 변화가 예측 가능하고 디버깅하기 쉬워지도록 하기 위함입니다.

 

---

🍖 메인

 

Redux의 작동 방식

1. 상태가 변경되어야 하는 이벤트가 발생하면, 상태에 대한 정보가 담긴 Action 객체가 생성됩니다.
2. 이 Action 객체는 Dispatch 함수의 인자로 전달됩니다.
3. Dispatch 함수는 Action 객체를 Reducer 함수로 전달해줍니다.
4. Reducer 함수는 Action 객체의 값을 확인하고, 값에 따라서 Store의 상태를 변경합니다.
5. React는 상태가 변경되었다는 것을 확인하면 화면을 새로 렌더링합니다.

이 과정에서 Action -> Dispatch -> Reducer -> Store 순서로 데이터가 단방향으로 흐른다는 것을 알 수 있습니다.

 

---

Action

{ type: 'INCREASE' }

{ type: 'SET_NUMBER', payload: 1 }

Action은 어떤 액션을 할 것인지 정의한 객체입니다.

type 속성은 필수로 지정해주어야하고, payload는 선택적으로 값을 전달합니다.

보통은 이 Action을 매번 직접 작성하는 것이 귀찮으므로 Action 생성자 함수를 만들어서 사용하는 경우가 많습니다.

 

---

Dispatch

// 직접 작성
dispatch( { type: 'INCREASE' } );
dispatch( { type: 'SET_NUMBER', payload: 1 } );

// 액션 생성자 함수 사용
dispatch( increase() );
dispatch( setNumber(1) );

Dispatch는 Reducer로 Action을 전달합니다.

 

---

Reducer

const counterReducer = (state = 1, action) => {
  switch (action.type) {
    case 'INCREASE':
	  return state + 1

    case 'DECREASE':
	  return state - 1

    case 'SET_NUMBER':
	  return action.payload

    default:
      return state;
  }
}

Reducer는 반드시 순수함수여야 합니다.

 

---

Store

const store = createStore(counterReducer);
// 현재는 configureStore를 권장하기 때문에 createStore를 import할 경우 취소선이 그어집니다.

root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

 

---

Redux Hook을 사용해보기

 

react-redux의 useSelector와 useDispatch를 사용하여 아래와 같이 쉽게 사용이 가능합니다.

import { useSelector, useDispatch } from 'react-redux';
import { increase, decrease } from './index.js';

export default function App() {
  const dispatch = useDispatch();
  const state = useSelector((state) => state);

  const plusNum = () => {
    dispatch(increase());
  };

  const minusNum = () => {
    dispatch(decrease());
  };

  return (
    <div className="container">
      <h1>{`Count: ${state}`}</h1>
      <div>
        <button className="plusBtn" onClick={plusNum}>+</button>
        <button className="minusBtn" onClick={minusNum}>-</button>
      </div>
    </div>
  );
}

 

---

🍨  디저트

 

사실 Redux보단 Redux Toolkit이 더 좋습니다.

 

부족하고 또 부족한 글 읽어주셔서 감사합니다.

그래도 다음에 또 오세요.