My-world 개발 보고서 : redux로 모달창 상태 관리하기, useRef로 모달 외부 영역 클릭 닫기, link/a 옵션, sass에서 bootstrap icon 사용

강원지·2023년 4월 21일

마이월드 개발 보고서

목록 보기

4/12

redux로 모달창 상태 관리하기

ModalReducer.ts

const OPEN_MODAL = "open modal window";
const CLOSE_MODAL = "close modal window";
type Modal = {
  show: boolean;
};
export const openModal = () => ({
  type: OPEN_MODAL,
});
export const closeModal = () => ({
  type: CLOSE_MODAL,
});

const initialState: Modal = {
  show: false,
};

type ModalAction = ReturnType<typeof openModal> | ReturnType<typeof closeModal>;

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

modules/index.ts
rootReducer에 ModalReducer을 추가해준다.

export const rootReducer = combineReducers({ TodoReducer, ModalReducer });

localstorage에 저장할 필요가 없기 때문에 persistConfig에는 따로 추가해주지 않는다.

모달을 다루는 버튼이 있는 컴포넌트
reducer을 가져와 dispatch 해준다.

  const modalState = useSelector((state: RootState) => state.ModalReducer);
  const dispatch = useDispatch();

  const toggleStartupMenu = () => {
    if (modalState.show) dispatch(closeModal());
    else dispatch(openModal());
  };

jsx에서 다음과 같이 작성하면 버튼 클릭에 따라 모달을 관리할 수 있다.

{modalState.show ? <StartupMenu /> : <></>}

모달창 닫기 : 외부 영역 클릭

모달창을 제외한 영역을 설정한 뒤, 그 영역(outside)을 ref.current로 관리한다. 만약 클릭된 부분이 outside라면 모달창을 닫는 함수를 수행한다.

export const Square = () => {
  const modalState = useSelector((state: RootState) => state.ModalReducer);
  const dispatch = useDispatch();

  const outside = useRef<HTMLDivElement>(null);

  const closeStartupMenu = () => {
    dispatch(closeModal());
  };
  return (
    <section>
      {modalState.show ? (
        <>
          <div
            ref={outside}
            onClick={(e) => {
              if (e.target === outside.current) closeStartupMenu();
            }}
            style={{
              position: "fixed",
              width: "100%",
              height: "100%",
            }}
          >
            <StartupMenu />
          </div>{" "}
        </>
      ) : (
        <></>
      )}
    </section>
  );
};