들어가며

클론 코딩으로 시작하는 Next.js에서, Modal을 구현하는 방법에 대해 적혀져있었다. 그동안 계속 컴포넌트내에서 state를 활용한 Modal만 사용하다가 여러 방법이 있어서 이참에 정리해보았다.

모달이란?

Modal: 화면 위에 화면을 띄워 사용자의 이목을 집중시키는 방식

위와 같은 화면을 Modal이라고 부른다.
주로 회원가입, 로그인 화면을 띄울 때 사용한다.

컴포넌트 내에서 적용하기

가장 간단한 방법으로, boolean값과 Modal Element의 position을 fixed로 주어 나타내는 방법이다.

회원가입이나 로그인 버튼을 누르면 boolean을 true로, Modal 창의 X 버튼을 누르면 false로 하는 식으로 구현한다.

• 장점: 간단하게 만들 수 있다.
• 단점: 매번 새롭게 만들어야 한다.

2. 리액트 포털 사용하기

React Portal?

포털: 부모 컴포넌트의 DOM 계층 외부에 있는 DOM 노드로 자식을 렌더링하는 방법

컴포넌트를 부모 컴포넌트 바깥에 렌더링 해준다.
여기서 바깥은 부모 컴포넌트와 형제 관계 위치에서 렌더링을 해준다는 것이다.

<div id="root">...</div>
<div id="modal">...</div>

root와 modal은 형제처럼 보이지만 실제 React 코드 내에선 modal은 root 안에서 보여지는 자식 컴포넌트이고, 렌더링만 root의 바깥에서 이루어지고 있다.

사용하는 이유

React는 렌더링의 구조가 tree구조로, 부모 컴포넌트가 렌더링된 후 자식 컴포넌트가 렌더링이 된다.
그러나 이런 특징이 불편함을 줄 때도 있다. 예를 들어, modal은 부모 컴포넌트의 style 속성에 제약을 받아 modal style 디자인을 할 때 후처리를 해주어야 한다.
위와 같은 상황에선 portal을 통해 독립적인 구조(형제 관계) & 부모-자식 관계를 동시에 유지하는 방법이 더 유용하다.

사용 방법

ReactDOM.createPortal(child, container)

• 첫 번째 인자로 리액트 컴포넌트를 받는다.
• 두 번째 인자로 리액트 컴포넌트를 넣을 DOM을 받는다.

(1) Modal이 렌더링 될 위치 지정하기

// pages/_app.tsx
const app = ({Component,pageProps}: AppProps) => {
 return (
 	<>
   	  <GlobalStyle />
   	  <Component {...pageProps} />
      <div id="modal" />
    </>
 );
}

pages/_app.tsx에 Modal이 렌더링되도록 하였다(root에 렌더링되도록)

---

(2) Modal 컴포넌트를 만들어, child로 컴포넌트를 받아 div id="modal"에 렌더링 되도록 하기

// components/Modal.tsx
// styled-components 생략

// children props type 지정, ReactNode 내에는 string, number 등등이 있음
interface IProps {
  children: React.ReactNode;
  closePortal: () => void;
}

// props.children: 태그와 태그 사이의 모든 내용을 표시하기 위해 사용되는 특수한 props
function Modal({ children, closePortal }: IProps) {
  
  // 값 저장 용도라면 string, number 등으로 / DOM 접근 용도라면 Element
  const ref = useRef<Element | null>(); // querySelector에 마우스를 올리면 Element
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
    if (document) { // DOM이 존재한다면?
      const dom = document.querySelector('#modal');
      ref.current = dom;
    }
  }, []);

  if (ref.current && mounted) {
    return createPortal(
      <Container>
        <BackGround onClick={closePortal} />
        {children}
      </Container>,
      ref.current,
    );
  }
  return null;
}

export default Modal;

---

(3) SignUp 컴포넌트를 만들고 Modal props.children으로 전달

// SignUp Component의 코드는 생략
// components/Header.tsx

/* ... */
  {modalOpened && (
    <Modal closePortal={() => setModalOpened(false)}>
      <SignUp /> // Modal의 props.children으로 들어감
    </Modal>
  )}
</Container>

---

결과

결과를 보면 div id='modal'의 자식으로 Modal을 작성하지 않았는데 React Portal에 의해 Modal이 자식으로 렌더링 된 것을 볼 수 있다.

단점

부모에 상태를 하나 만들고 props로 mordalOpened state를 바꾸는 함수를 전달해야해서 번거롭다.

3. Hooks로 만들기

가장 재사용성과 코드 가독성이 높은 방법이다.
hooks 폴더 내에 커스텀 hooks을 만든다.

// hooks/useModal.tsx
import React, { useRef, useEffect, useState } from 'react';
import { createPortal } from 'react-dom';
import styled from 'styled-components';

const Container = styled.div`
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 11;
`;

const Background = styled.div`
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.75);
`;

const useModal = () => {
  const [modalOpened, setModalOpened] = useState(false);
  const openModal = () => {
    setModalOpened(true);
  };

  const closeModal = () => {
    setModalOpened(false);
  };

  interface IProps {
    children: React.ReactNode;
  }

  function ModalPortal({ children }: IProps) {
    const ref = useRef<Element | null>();
    const [mounted, setMounted] = useState(false);

    useEffect(() => {
      setMounted(true);
      if (document) {
        const dom = document.querySelector('#modal');
        ref.current = dom;
      }
    }, []);

    if (ref.current && mounted && modalOpened) {
      return createPortal(
        <Container>
          <Background onClick={closeModal} />
          {children}
        </Container>,
        ref.current,
      );
    }
    return null;
  }

  return {
    openModal,
    closeModal,
    ModalPortal,
  };
};

export default useModal;

useModal을 사용하여 모달을 열고 닫는 함수와 모달 콘텐츠를 표시해줄 컴포넌트를 불러올 수 있다.

// components/Header.tsx
import Link from 'next/link';
import React from 'react';
import styled from 'styled-components';
import Airbnb from './svg/Airbnb';
import SignUpModal from './auth/SignUpModal';
import useModal from '@/hooks/useModal';

/* ... */

function Header() {
  const { openModal, ModalPortal } = useModal();
  return (
    <Container>
      <Link href="/">
        <LogoWrapper>
          <Airbnb />
        </LogoWrapper>
      </Link>
      <Auth>
        <Signup onClick={openModal}>회원가입</Signup>
        <Signin>로그인</Signin>
      </Auth>
      <ModalPortal>
        <SignUpModal />
      </ModalPortal>
    </Container>
  );
}

export default Header;

useModal Hook을 통해 모달을 여닫는 것과 콘텐츠를 띄우는 것을 한 줄로 표현할 수 있다.