My-world 개발 보고서 : 여러 모달창 다루기

하나의 모달을 관리하는 reducer를 확장해서 여러 모달창을 다루는 기능을 만들어보았다.

하나의 모달을 관리하는 reducer 보기

• redux로 모달창 상태 관리하기
• 모달창을 커스텀 훅으로 관리하기

여러 모달을 관리하는 reducer 만들기

action

무슨 일이 일어났는지 설명하는 이벤트.
인자와 payload에 이벤트가 발생한 모달의 이름을 추가했다. 나중에 열거나 닫고자 하는 모달창을 찾을 때 사용된다.

export const openModal = (modalName: string) => ({
  type: OPEN_MODAL,
  payload: modalName,
});
export const closeModal = (modalName: string) => ({
  type: CLOSE_MODAL,
  payload: modalName,
});

reducer

state와 action 객체를 받아 액션의 타입에 따라 state 업데이트 후 반환한다.

export const ModalReducer = (state = initialState, action: ModalAction) => {
  switch (action.type) {
    case OPEN_MODAL:
      return {
        modalName: action.payload,
        show: true,
      };
    case CLOSE_MODAL:
      return {
        modalName: action.payload,
        show: false,
      };
    default:
      return state;
  }
};

위 함수에서 action들을 발생시켜 state를 콘솔창에 출력하면 다음은 결과가 나온다. 이벤트를 발생시킨 컴포넌트에서는 이 반환값을 통해 내가 선택한 모달창이 어떤 상태인지 알 수 있다.

dispatch

수행할 함수를 모달 이름과 함께 넘겨주면 action에서 type과 payload가 정의된 객체를 반환하여 reducer함수로 넘긴다.

const dispatch = useDispatch();

//outside 클릭 시 띄워져 있는 모달창이 닫히는 훅.
useModalClose(outside, () => dispatch(closeModal("")));

//이벤트 발생 시 basic modal을 띄우는 함수
const showStartupMenu = () => {
  if (!show) dispatch(openModal("BasicModal"));
};

전체 소스 코드 보기

이전에 업로드했던 코드과 비교해보자.

참고
@woohobi님의 블로그