[React, React-Native] Context API로 전역적으로 모달 관리하기

Intro

---

프로젝트 로직에서 커뮤니티 게시글에서 작성자 프로필을 누르거나 번개 미팅에서 1:1 채팅을 누를 때 사용자의 프로필을 조회할 수 있는 모달창을 보여주도록 기획하였다. 프로필 모달의 경우 여러 페이지에서 모달 컴포넌트를 필요할 때마다 구현해야했다. 이러한 작업은 한 파일 내에 <Modal /> 컴포넌트를 추가해 구현을 하면 한 페이지에 코드가 길어지게 되고 가독성이 떨어졌다.

모달만 따로 파일로 분리해서 구현하는 방법으로는 코드가 길어지는 것을 방지할 수 있지만, 모달을 구현할 때마다 이전에 구현했던 모달 컴포넌트를 참고하면서 모달의 속성이나 스타일을 복사/붙여넣으며 코드를 짜고 있는 게 비효율적으로 느껴졌다.

닫기나 모달 외의 창을 눌렀을 때 모달이 닫히는 기능도 동일하기 때문에 이걸 공통 컴포넌트로 사용할 수 있지 않을까 고민하다가.. 팀원 중 한분이 이와 비슷한 내용의 블로그 글을 공유해주셔서 참고해서 만들어보았다.

 

 

Context API로 모달 관리하기

---

모달의 상태를 관리하는 컨텍스트와 모달을 열고 닫는 함수 컨텍스트를 만들고 Provider로 제공한다.

 

• ModalContext.jsx

import React, { createContext, useContext, useState } from 'react';

const ModalStateContext = createContext();
const ModalDispatchContext = createContext();

export const ModalProvider = ({ children }) => {
  const [modal, setModal] = useState({ type: null, props: null, onBackdropPress: null });

  const openModal = modal => {
    setModal(modal);
  };

  const closeModal = () => {
    setModal({ type: null, props: null, onBackdropPress: null });
  };

  return (
    <ModalDispatchContext.Provider value={{ openModal, closeModal }}>
      <ModalStateContext.Provider value={modal}>{children}</ModalStateContext.Provider>
    </ModalDispatchContext.Provider>
  );
};

export function useModalState() {
  return useContext(ModalStateContext);
}

export function useModalDispatch() {
  return useContext(ModalDispatchContext);
}

 

• ModalStateContext: Modal은 type과 props를 가진 객체를 갖는다. (ModalContainer.jsx 참고)
• ModalDispatchContext: Modal을 열고 (openModal) 닫는 (closeModal) 기능을 전역적으로 사용하기 위한 컨텍스트

컨텍스트는 값이 변경되면 해당 컨텍스트를 사용하는 모든 컴포넌트가 리렌더링된다. 상태 값이 변경되도 상태를 변경하는 함수를 리렌더링할 필요가 없으므로 분리하였다.

 

모달은 'react-native-modal' 라이브러리를 사용하여 구현하고 있었는데

https://github.com/react-native-modal/react-native-modal

GitHub - react-native-modal/react-native-modal: An enhanced, animated, customizable Modal for React Native.

해당 Modal 컴포넌트의 속성들이 여러 모달에 공통적으로 사용되고 있어서 ModalContainer 라는 공통 컴포넌트를 만들어서 자식 컴포넌트(children)를 속성으로 받아 구현해 보았다.

 

• ModalContainer.jsx

import React from 'react';
import Modal from 'react-native-modal';
import { useModalDispatch, useModalState } from '../../contexts/ModalContext';
import ProfileModal from './contents/ProfileModal';
import PublicInfoMessage from './contents/PublicInfoMessage';
import SignUpCompleteModal from './contents/SignUpCompleteModal';
import Dropdown from './contents/CitySelectModal';
import AlertModal from './contents/AlertModal';

const MODAL_CONTENTS = {
  signUpComplete: { component: SignUpCompleteModal },
  userProfile: { component: ProfileModal },
  locationDropdown: {
    component: Dropdown,
    animationInTiming: 1,
    animationOutTiming: 1,
  },
  publicInfoMessage: { component: PublicInfoMessage },
  messageAlert: {
    component: AlertModal,
    animationInTiming: 1,
    animationOutTiming: 1,
    backdropOpacity: 0,
  },
};

const ModalContainer = () => {
  const { type, props, onBackdropPress } = useModalState();
  const { closeModal } = useModalDispatch();

  if (!type) return null;

  const {
    component: Children,
    backdropOpacity = 0.3,
    animationInTiming = 300,
    animationOutTiming = 300,
    disableBackdropPress = false,
  } = MODAL_CONTENTS[type];

  return (
    <Modal
      isVisible={true}
      backdropOpacity={backdropOpacity}
      animationInTiming={animationInTiming}
      animationOutTiming={animationOutTiming}
      onBackdropPress={disableBackdropPress ? undefined : onBackdropPress || closeModal}>
      <Children {...props} />
    </Modal>
  );
};

export default ModalContainer;

 

• MODAL_CONTENTS
  • component: 자식 컴포넌트 (type 명칭)
  • 그 외 Modal 라이브러리 관련 속성
• 모달 컨텍스트에서 받아온 type, props, onBackdropPress 값들로 모달 컴포넌트를 구현한다.

 

생성한 컨텍스트와 ModalContainer 컴포넌트는 App에 배치한다.

• App.jsx

import React from 'react';
import { ModalProvider } from './src/contexts/ModalContext';
import ModalContainer from './src/components/modals/ModalContainer';

function App() {
  return (
    <ModalProvider>
      <MainStack />
      <ModalContainer />
    </ModalProvider>
  );
}

export default App;

 

---

• 사용 예

const { openModal } = useModalDispatch();

openModal({
  type: 'userProfile',
  props: { user: { profileImage: authorImg, profileName: authorName } },
})

 

 

프로젝트에 모달 컨텍스트를 구현하고 개발한 지 3주 정도 되었는데 모달을 구현할 때 중복 코드가 줄어들었고 각 페이지에서 매번 구현하던 모달 컴포넌트를 분리함으로써 가독성도 높아졌다. 팀원들도 모두 만족하며 사용중이다. 공통적으로 사용되는 코드들을 줄여나가는 리팩토링 과정을 꾸준히 해야겠다.

 

 

 

 

 

참고한 자료)

---

 

[React] 효율적으로 모달 관리하기