# Next.js + Redux Toolkit으로 모달 상태 관리하기

Next.js에서 Redux Toolkit을 사용하여 글로벌 모달 상태를 관리하는 방법을 정리합니다. 이번 포스트에서는 **Redux Toolkit을 활용하여 모달을 중앙에서 제어하는 방식**을 구현합니다.

## 프로젝트 구조

```plaintext
/redux
  ├── store.ts
  ├── hooks.ts
  └── slices
      ├── index.ts
      └── modal.ts
/components
  ├── ModalContainer.tsx
  └── modals
      ├── LoginModal.tsx
      ├── SignUpModal.tsx
      └── AddImageModal.tsx
/pages
  └── _app.tsx
@types
  └── index.d.tsx
```
---

## 1. 모달 타입

### `index.d.ts`

```typescript
interface ModalState {
  type: string;
  props?: object;
}
```

---

## 2. `rootReducer` 설정

Redux의 `combineReducers`를 이용해 rootReducer를 생성합니다.

### `index.ts`
```typescript
import { combineReducers, UnknownAction } from '@reduxjs/toolkit';
import modal from '@redux/slices/modal';

export interface CombinedSliceState {
  modal: ModalState;
}

export default function rootReducer(
  state: CombinedSliceState,
  action: UnknownAction,
) {
  switch (action.type) {
    default: {
      const combinedReducer = combineReducers({
        modal,
      });
      return combinedReducer(state, action);
    }
  }
}
```

이제 `modal` 상태가 Redux Store에서 관리됩니다.

---

## 3. Redux Store 설정

Redux Store를 설정하여 전역 상태를 관리할 준비를 합니다.

### `store.ts`
```typescript
import { configureStore, Reducer } from '@reduxjs/toolkit';
import { createWrapper } from 'next-redux-wrapper';

import rootReducer, { CombinedSliceState } from '@redux/slices/index';

const createStore = () => {
  return configureStore({
    reducer: rootReducer as Reducer<CombinedSliceState>,
    devTools: process.env.NODE_ENV !== 'production',
    middleware: (getDefaultMiddleware) =>
      getDefaultMiddleware({
        serializableCheck: false, // props로 callback fn을 전달해야 하는경우 대비
      }),
  });
};

const store = createStore();
const wrapper = createWrapper(createStore);

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

export default wrapper;
```

Redux Store를 `configureStore`를 이용해 생성하며, Next.js에서 사용하기 위해 `next-redux-wrapper`를 적용합니다.

---

## 4. Redux Hooks 설정

React에서 Redux 상태를 쉽게 사용할 수 있도록 **커스텀 훅**을 생성합니다.

### `hooks.ts`
```typescript
import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';

import type { RootState, AppDispatch } from '@redux/store';

export const useAppDispatch = () => useDispatch<AppDispatch>();
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
```

이렇게 하면 `useAppDispatch`와 `useAppSelector`를 사용하여 타입 안전한 Redux 상태 관리를 할 수 있습니다.

---

## 5. 모달 상태 Slice 생성

모달 상태를 관리하는 `modalSlice.ts` 파일을 만듭니다.

### `modal.ts`
```typescript
import { createSlice, PayloadAction } from '@reduxjs/toolkit';

const initialState: ModalState = {
  type: '',
  props: {},
};

export const modalSlice = createSlice({
  name: 'modal',
  initialState,
  reducers: {
    openModal: (state, action: PayloadAction<ModalState>) => {
      const { type, props } = action.payload;
      state.type = type;
      state.props = props;
    },
    closeModal: (): ModalState => {
      return initialState;
    },
  },
});

export const { openModal, closeModal } = modalSlice.actions;
export default modalSlice.reducer;
```

- `openModal`: 모달을 열고 모달의 타입과 props를 설정
- `closeModal`: 모달을 닫고 초기 상태로 변경

---

## 6. `ModalContainer` 컴포넌트 생성

`ModalContainer`는 전역적으로 모달을 관리하는 역할을 합니다.

### `ModalContainer.tsx`
```typescript
import styled from 'styled-components';
import Image from 'next/image';
import useModal from '@hooks/useModal';
import { useAppSelector } from '@redux/hooks';

import xBtn from '@public/images/x_btn.png'; // x버튼 이미지
import LoginModal from '@components/modals/LoginModal';
import SignUpModal from '@components/modals/SignUpModal';
import AddImageModal from '@components/modals/AddImageModal';

const MODAL_MAP: Record<string, ({ ...props }) => JSX.Element> = {
  login: LoginModal,
  signUp: SignUpModal,
  addImage: AddImageModal,
};

export default function ModalContainer() {
  const { closeModal } = useModal();
  const { type, props } = useAppSelector((store) => store.modal);

  const Modal = MODAL_MAP[type];
  if (!type || !Modal) return null; // 모달정보 없을경우 출력하지 않음

  return (
    <>
      <ModalContainerSt>
        <XBtnSt onClick={closeModal}>
          <Image src={xBtn} alt="close button" />
        </XBtnSt>
        <Modal {...props} />
      </ModalContainerSt>
      <ModalBackgroundSt onClick={closeModal} />
    </>
  );
}
```

---

## 7. `_app.tsx`에서 Redux 적용

Next.js에서 Redux Provider와 ModalContainer를 적용합니다.

### `_app.tsx`
```typescript
import type { AppProps } from 'next/app';
import { Provider } from 'react-redux';
import wrapper from '@redux/store';
import ModalContainer from '@components/ModalContainer';

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <Provider store={wrapper.store}>
      <Component {...pageProps} />
      <ModalContainer />
    </Provider>
  );
}

export default wrapper.withRedux(MyApp);
```

이제 Redux Store가 Next.js 전역에 적용되며, `ModalContainer`가 모든 페이지에서 동작합니다.

---

## 마무리

`openModal({ type: 'login' })` 같은 호출을 통해 쉽게 모달을 띄울 수 있습니다.


Next.js + Redux Toolkit으로 모달 관리하기

FrontEnd

TypeScript

Next.js + Redux Toolkit으로 모달 관리하기

김동환