이전

Next.js 위에서 모달 컴포넌트를 구현하는 절차를 설명하겠습니다. 지적 등이 있으면, 코멘트 해 주시면 감사합니다 🙇‍♂️

【Next.js】환경 구축과 패키지를 캡처하는 방법

【Next.js】모달 컴퍼넌트의 구현을 해설【UI편】←지금 코코

【Next.js】모달 컴퍼넌트의 구현을 해설【hooks편】

이하, 본제입니다.

React-modal

React-modal는 React 라이브러리 유형입니다. React-modal를 사용하면 모달 구성 요소를 쉽게 구현할 수 있습니다.

Github

문서

이후부터 구체적인 사용법을 해설하겠습니다.

간단한 모달 구성 요소를 구현해 봅니다.

【1】설치

npm 또는 yarn에서 react-modal를 설치하십시오.

npm install react-modal
yarn add react-modal

【2】모달용 파일 추가

pages/modal.tsx를 추가합니다. (기본적으로이 pages/modal.tsx 파일에 코드를 추가합니다.) 이렇게하면 http://localhost:3000/modal에 액세스하여 모달을 구현 한 페이지를 확인할 수 있습니다.

이것은 Next.js의 기본 기능입니다. 편리!!

【3】실제로 코드를 기술해 간다(전체상)

먼저 코드의 전체 이미지를 보여줍니다.

pages/modal.tsx

import Modal from 'react-modal'
import { useState } from 'react'

// スタイリング
const customStyles = {
  overlay: {
    position: "fixed",
    top: 0,
    left: 0,
    backgroundColor: "rgba(0,0,0,0.3)"
  },

  content : {
    top                   : '50%',
    left                  : '50%',
    right                 : 'auto',
    bottom                : 'auto',
    marginRight           : '-50%',
    width                 : '500px',
    height                : '300px',
    transform             : 'translate(-50%, -50%)'
  }
};

// アプリのルートを識別するクエリセレクタを指定する。
Modal.setAppElement('#__next')

const App = () => {
  const [modalIsOpen,setIsOpen] = useState(false)

  // モーダルを開く処理
  const openModal = () => {
    setIsOpen(true)
  }

  const afterOpenModal = () => {
    // モーダルが開いた後の処理
  }

  // モーダルを閉じる処理
  const closeModal = () => {
    setIsOpen(false)
  }

    return (
      <>
        <button onClick={openModal}>Open Modal</button>
        <Modal
          // isOpenがtrueならモダールが起動する
          isOpen={modalIsOpen}
          // モーダルが開いた後の処理を定義
          onAfterOpen={afterOpenModal}
          // モーダルを閉じる処理を定義
          onRequestClose={closeModal}
          // スタイリングを定義
          style={customStyles}
        >

          <h2>Hello</h2>
          <button onClick={closeModal}>close</button>
        </Modal>
      </>
    )
}

export default App

실제로 그려지는 화면은 아래와 같습니다.



이후부터 차례로 해설해 갑니다.

【4】필요한 컴포넌트를 import

react-modal 및 State 관리를 위해 useState를 추가합니다.

import Modal from 'react-modal'
import { useState } from 'react'

useState의 기사는 이 기사을 읽으면 이해가 깊어진다고 생각합니다.

【5】 Modal의 속성을 해설

import Modal from 'react-modal' 에서 import 해 온 Modal 컴퍼넌트의 내용(프로퍼티)으로부터 해설해 갑니다.

return (
  <div>
    <button onClick={openModal}>Open Modal</button>
      <Modal
        // isOpenがtrueならモダールが起動する
        isOpen={modalIsOpen}
        // モーダルが開いた後の処理を定義
        onAfterOpen={afterOpenModal}
        // モーダルを閉じる処理を定義
        onRequestClose={closeModal}
        // スタイリングを定義
        style={customStyles}
      >

        <h2>Hello</h2>
        <button onClick={closeModal}>close</button>
      </Modal>
  </div>

isOpen : 모달 표시 여부 boolean 지정

onRequestClose : 모달을 닫기 위한 함수 지정

onAfterOpen : 모달을 연 후 실행할 함수 지정

style : 스타일링 정의

다른 많은 속성이 있습니다. 궁금한 분은 문서을 읽어보십시오.

[6] 앱의 경로를 식별하는 쿼리 선택기를 지정합니다.

모달이 열려있을 때 다른 콘텐츠를 숨길 것입니다. 이를 위해 react-modal 앱의 루트를 식별하는 쿼리 선택기를 지정하여 Modal.setAppElement를 호출해야 합니다.
Next.js에서는 #__next가 루트로 지정되기 때문입니다. 아래와 같이 코드를 추가합니다.

Modal.setAppElement('#__next')

【7】스타일링과 함수 정의

스타일링과 함수(모달 열기)를 App 구성 요소에 정의합니다.

우선은 스타일링에서.

const customStyles = {
  overlay: {
    position: "fixed",
    top: 0,
    left: 0,
    backgroundColor: "rgba(0,0,0,0.3)"
  },

  content : {
    top                   : '50%',
    left                  : '50%',
    right                 : 'auto',
    bottom                : 'auto',
    marginRight           : '-50%',
    width                 : '500px',
    height                : '300px',
    transform             : 'translate(-50%, -50%)'
  }
}

overlay는 모달이 열려있을 때 배경 스타일을 정의하고 content는 모달 자체의 스타일링을 정의합니다.

여기에 정의한 상수 customStyles를 Modal 구성 요소의 style 속성에 추가합니다.

<Modal
  //略
  // スタイリングを定義
  style={customStyles}
>

다음에 함수 컴퍼넌트내에 모달을 닫거나 열거나 하는 함수를 정의해 갑니다.

const App = () => {
  const [modalIsOpen,setIsOpen] = useState(false);

  // モーダルを開く処理
  const openModal = () => {
    setIsOpen(true);
  }

  const afterOpenModal = () => {
    // モーダルが開いた後の処理
  }

  // モーダルを閉じる処理
  const closeModal = () => {
    setIsOpen(false);
  }

이러한 함수는 Modal 구성 요소의 속성 내에서 다음과 같이 사용됩니다.

<Modal
  // isOpenがtrueならモダールが起動する
  isOpen={modalIsOpen}
  // モーダルが開いた後の処理を定義
  onAfterOpen={afterOpenModal}
  // モーダルを閉じる処理を定義
  onRequestClose={closeModal}
  // スタイリングを定義
  style={customStyles}
>

이상입니다! 기본적인 곳은 해설했으므로, 좀 더 자세히 알고 싶은 분은 Github이나 문서를 읽으면 이해가 깊어질까 생각합니다!!

그럼 ~!