custom Hooks를 사용하여 Modal Component 리팩토링

Issue

현재 프로젝트에서 대부분의 사이드 이벤트에 대한 내용은 Modal 창이 띄워져 화면에 랜더링된다.

 

이를 위해 Modal 창에 대한 Presentation Component인 BodyBlackout 코드를 다음과 같이 작성하였다.

mport { useDispatch } from "react-redux";
import styled from "styled-components";

const BodyBlackout = ({
  modalSort,
  setAuthModalVisible,
  isVisibleAuthModal,
}) => {
  const dispatch = useDispatch();
  if (isVisibleAuthModal)
    document.querySelector("body").style.setProperty("overflow", "hidden");
  return (
    <BodyBlackoutStyle
      onClick={() => {
        dispatch(setAuthModalVisible(modalSort));
      }}
    />
  );
};

const BodyBlackoutStyle = styled.div`
  position: absolute;
  z-index: 1010;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.65);
  cursor: pointer;
`;

export default BodyBlackout;

해당 BodyBlackout 컴포넌트에 넘겨진 props값을 통해 각 컴포넌트의 설정 값에 맞게 Modal 창이 띄워지도록 하였다.

 

예를 들어 아래와 같이 Register Container Component 내에서 react-redux store 내에서 현재 Modal 창이 화면에 보여지는지에 대한 여부를 저장하는 isVisibleAuthModal state 값을 설정하였고 이를 BodyBlackout Component에 props로 전달하는 로직으로 Modal 창을 랜더링 여부를 결정하도록 코드를 작성하였다.

 

액션이 발생할 경우 Modal 창이 보여지는지 여부를 설정해주는 액션 생성 함수 setAuthModalVisible를 만들어주고 해당 액션 생성 함수에 인자로는 현재 활성화되어야 할 form을 받을 수 있도록 코드를 작성하였다.

    ( ... )

const SET_AUTHMODALVISIBLE = "auth/SET_AUTHMODALVISIBLE";

	( ... )

export const setAuthModalVisible = createAction(
  SET_AUTHMODALVISIBLE,
  form => form
);

const initialState = {
  login: {
    ( ... )
    isVisibleAuthModal: false,
  },
  register: {
    ( ... )
    isVisibleAuthModal: false,
    is_receive_email: false,
  },
};

const auth = handleActions(
  {
    ( ... )
    [SET_AUTHMODALVISIBLE]: (state, { payload: form }) =>
      produce(state, draft => {
        draft[form].isVisibleAuthModal = !state[form].isVisibleAuthModal;
      }),
  },
  initialState
);

export default auth;

 

이렇게 auth module에서 설정한 isVisibleAuthModal과 setAuthModalVisible를 Register Container Component 내에서 가져 와 Auth Presentation Component 내에서 액션이 발생할 경우에 해당 액션 함수를 통해 redux-store에 있는 isAuthModalVisible state값을 변경하도록 코드를 작성하였다.

import React, { useCallback, useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import {
  setAuthModalVisible,
} from "../../modules/auth";
import BodyBlackout from "../../components/common/BodyBlackout";

const RegisterFormContainer = () => {
  const dispatch = useDispatch();

  const isVisibleAuthModal = useSelector(
    ({ auth }) => auth.register.isVisibleAuthModal
  );

	( ... )

  if (isVisibleAuthModal) {
    return (
      <>
        <BodyBlackout
          modalSort="register"
          setAuthModalVisible={setAuthModalVisible}
          isVisibleAuthModal={isVisibleAuthModal}
        />
        <AuthTemplate>
          <RegisterForm
            form={form}
            checkCurrentAdvertiseAccess={checkCurrentAdvertiseAccess}
            isCorrectPasswordPattern={isCorrectPasswordPattern}
            authError={authError}
            changeRegisterInputValue={changeRegisterInputValue}
            inputValueDuplicationCheck={inputValueDuplicationCheck}
            sendToEmailForVerificationCode={sendToEmailForVerificationCode}
            signup={signup}
          />
        </AuthTemplate>
      </>
    );
  } else return null;
};

export default RegisterFormContainer;

하지만 이렇게 코드를 작성하다 보니, 기능 상에는 문제는 없지만 Modal 창 기능이 필요한 모든 컴포넌트에서 modalVisible state값을 store에 일일히 저장해두어야 해서 비효율적이었으며 데이터 흐름 상 modal 랜더링 관련 state 값을 기능 컴포넌트들의 state값에 저장해두는 건 다소 맞지 않으며 코드를 복잡하게 만드는 문제를 야기시켰다.

 

이를 위해 custom Hooks를 사용하여 react-redux 대신에 Modal Visible를 컨트롤할 수 있도록 코드를 리팩토링하였다.

 

Refactor

우선 Modal Template 역할을 해줄 Modal Component를 다음과 같이 작성하였다.

import React, { Fragment } from "react";
import ReactDOM from "react-dom";
import styled from "styled-components";

const Modal = ({ isShowing, hide, children }) => {
  if (isShowing) {
    document.body.style.setProperty("overflow", "hidden");
    return ReactDOM.createPortal(
      <Fragment>
        <BodyBlackoutStyle onClick={hide} />
        {children}
      </Fragment>,
      document.body
    );
  } else return null;
};

const BodyBlackoutStyle = styled.div`
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.65);
  cursor: pointer;
  z-index: 1100;
`;

export default Modal;

우선 React.createPortal를 사용하여 Modal Component가 특정한 부모 컴포넌트에 귀속되지 않고 독립적으로 랜더링될 수 있도록 코드를 작성하였다.

 

 

https://ko.reactjs.org/docs/portals.html

Portals – React

React.createPortal를 사용할 상위 노드들의 overflow 요소나 z-index에 대한 우선 순위 등 부모 노드의 스타일에 대해서 방해를 받지 않고 원하는 설정에 맞춰 부모 컴포넌트의 외부에서 안전하게 랜더링할 수 있다.

 

또한 Modal 창이 화면에 띄워져 있는 경우에는 스크롤이 동작하면 안되기 때문에 isShowing 값이 true일 경우엔 body 태그 scroll style 값을 hidden으로 설정해주었다.

 

다음으론 Modal 창과 관련된 state값과 해당 state값들을 이용하여 Modal 창 관련 설정을 담당해 줄 useModal 이라는 custom Hooks코드를 작성하였다.

import { useState } from "react";

const useModal = () => {
  const [isShowing, setIsShowing] = useState(false);
  const [modalInfo, setModalInfo] = useState([]);

  const setModalVisible = (...modalInfo) => {
    setModalInfo(modalInfo);
    setIsShowing(!isShowing);
  };

  return { isShowing, modalInfo, setModalVisible };
};

export default useModal;

setModalVisible 함수는 이벤트를 발생시키는 Trigger 요소(ex. 회원가입 버튼)에 콜백 함수로 지정해 두고 해당 함수가 호출되면 현재 컴포넌트에 커스터마이징된 Modal 창을 보여주기 위한 정보를 담고 있는 modalInfo를 인자로 받아 state값을 설정한다.

 

이때 modalInfo와 같은 경우는 컴포넌트마다 받아야 되는 정보가 상이하기 때문에 Rest Parameter 를 사용하여 받아 온 인자값들을 배열에 저장하도록 코드를 작성하였다.

 

마지막으론 Modal 창 기능이 필요한 Presentation Component 내에서 Modal Template 기능을 하는 Modal 컴포넌트와 Modal 관련 컨트롤를 담당하는 useModal 컴포넌트를 import하여 필요한 동작에 맞게 코드를 작성하였다.

	( ... )
    
import Modal from "../../components/common/Modal";
import useModal from "../../hooks/useModal";
import ModalTemplate from "../../components/common/ModalTemplate";
import MakeRoomInfoModal from "../../components/common/MakeRoomInfoModal";

const MainForm = ({
	( ... )
}) => {
  const { isShowing, modalInfo, setModalVisible } = useModal();

  	( ... )

  return (
    <Container>
      <Modal isShowing={isShowing} hide={setModalVisible}>
        <ModalTemplate>
          <MakeRoomInfoModal modalInfo={modalInfo} hide={setModalVisible} />
        </ModalTemplate>
      </Modal>
      
      ( ... )
      
    </Container>
  );
};

	( ... )

export default MainForm;

 

동작 영상

 

Reference

https://upmostly.com/tutorials/modal-components-react-custom-hooks