예제로 알아보는 Redux 사용법 (1) Redux

오늘 예제는 모달 열기와 닫기입니다.

이번 모달은 한 페이지 뿐만 아니라 다른 페이지에서도 사용될수 있다고 가정합니다.

 

---

[1] 다음 모달 열기 버튼이 있습니다. 저는 위에서 모달버튼의 현재 상태를 한 페이지 뿐만 아니라 다른 페이지에서도 쓰이기에 전역상태로 관리합니다.

 

[2] 프로젝트에서 리덕스 폴더 구조를 세팅합니다.

 

1. store 폴더를 만듭니다.

2. config 폴더를 만듭니다. 전역 상태관리 저장소인 store 파일을 보관합니다. 

3. modules 폴더를 만듭니다. 리덕스 모듈을 보관할 파일을 보관합니다. 

 

[3]  전역 상태 관리 저장소를 만듭니다. >>>  액션 변수 , 액션 함수 , 리듀서가 담겨있는 파일을 만듭니다. >>>

     루트 컴포넌트에  전역 상태관리 저장소를  Provider를 통해 주입합니다. 

     

(1)  reducer 에 리듀서 함수를  나중에 등록해주어야 합니다.

import { combineReducers, createStore } from "redux";

import modalReducer from "../module/modalSlice";

// 리듀서들을 하나로 묶었습니다.
const rootReducer = combineReducers({
  modalReducer,
});

// 그것을 가지고 리덕스 전역 상태관리 저장소인 store를 생성하였습니다
const store = createStore(rootReducer);

 

 

(2)  리덕스 모듈을 만듭니다. 액션 함수 액션 변수 초기값  액션변수에 따라 액션함수을 발생시키는 리듀서 가  담겨있습니다.

// 초기값
const initialState = {
  isModalState: false,
};

// 액션변수
export const OPEN = "modal/OPEN";
export const CLOSE = "modal/CLOSE";

// 액션함수
export const open = () => ({ type: OPEN });
export const close = () => ({ type: CLOSE });

// 모달리듀서
export default function modalReducer(state = initialState, action) {
  switch (action.type) {
    case OPEN:
      return { ...state, isModalState: true };
    case CLOSE:
      return { ...state, isModalState: false };
    default:
      return state;
  }
}

 

(3)   루트 컴포넌트에  전역 상태관리 저장소를  Provider를 통해 주입합니다. 

....
import { store } from "./store/config/configStore";
import { Provider } from "react-redux";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

 

[4]  store가 잘 연결되었는지 , 리덕스로부터 데이터를 잘 받아오는지 ,  리덕스가 잘 작동하는지  봅시다.

 

(1) 리덕스는  useSelector로  전역 상태관리 저장소로부터 데이터를 받아옵니다. 

저는 저장소에서 isModalState값을 가져왔습니다.  그리고 콘솔을 찍어보았습니다.

  const modal = useSelector((state) => state);
  console.log(modal)

저는 isModalState만 사용할거라서  객체비구조화할당문법을 이용하였습니다. 

 

 

(2) 그리고 리덕스 모듈에서 생성했던  open , close 액션함수를 가져와서  모달 닫기 , 모달 열기 함수를 만들었습니다. 

 const modalOpen = () => dispatch(open());
 const modalClose = () => dispatch(close());

그러면 왜 dispatch가 필요할까요 

   1. 사용자의 모달을 여는 행위를 dispatch가 감지한다. 

   2.  리듀서로 전달합니다.  모든 경우의 수 중에서 모달을 여는 행위에 해당하는 액션 변수를 감지합니다. 

        액션 함수가 실행됩니다. state가 반환됩니다. 

   3.  ui에 반영됩니다. 

1 - 2 - 3 의 흐름을  가지고 있어서 필요하다고 봅니다. 

 

(3) 이것을 이제 적용합니다.

 {isModalState === false ? (
        <div>
          <button onClick={modalOpen}>Open</button>
        </div>
      ) : (
        <div>
          <span onClick={modalClose}>x</span>
          <form>
            <input type="text" />
            <br />
            <input type="password" name="" id="" />
            <br />
            <button type="submit">제출</button>
          </form>
        </div>
      )}

 

 

정리하자면 

 

   리덕스는  전역상태를 관리하는 라이브러리들중 하나입니다. 

   상태값이 이페이지에서 쓰이고 저페이지에서도 쓰인다면  리덕스가 좋습니다.

    

다음에는 

  리덕스 모듈 부분을 리덕스 툴킷으로 어떻게 바꾸는지를 보이겠습니다. 

 

리덕스 툴킷?

     리덕스의 기본 컨셉을  유지한채, 리덕스를 사용하시는 분들이 편리하게 사용할수 있도록 간편화한것입니다.