React 환경에서 웹 화면에 Modal 창 쉽게 적용하기

이 라이브러리를 만들기 전에 프로젝트를 할 때마다 매번 모달을 만들어서 했었어요.

 

근데 만들 때마다 너무 귀찮아서 '그냥 라이브러리로 만들어서 앞으로 있을 프로젝트에서는 쉽게 적용하자!' 란 생각으로 이 라이브러리를 만들게 됐습니다.

 

깃허브 레포지토리 주소

https://github.com/nyeonseok/nyeonseok-modal

 

---

1. 설치

---

먼저 이 라이브러리는 npm을 이용하여 다운받을 수 있습니다. 그리고 React 환경에서 사용할 수 있어요!

# 프로젝트에 npm 패키지 설치
npm install

# nyeonseok-modal 라이브러리 설치
npm install nyeonseok-modal

 

이미 프로젝트에 npm이 설치되어 있다면 2번 째 줄만 작성하시면 돼요.

 

 

2. Modal import

---

필요한 라이브러리는 설치했으니, 모달이 필요한 페이지에서 import 해줘야 쓸 수 있겠죠?

 

페이지 상단에 다음 두 줄을 입력합니다!

import { useState } from "react";
import { Modal } from "nyeonseok-modal";

 

이제 nyeonseok-modal을 사용할 첫 번째 단계가 끝났어요.

 

 

3. 상태 설정 (useState)

---

nyeonseok-modal을 사용할 마지막 준비 단계에요! 

 

export 하는 함수 안에 다음 상태 설정을 해줍니다.

// modal open 상태: true이면 보이고 false이면 숨김
const [isOpen, setIsOpen] = useState(false);

// modal 제목
const [modalTitle, setModalTitle] = useState("");

// modal 내용
const [modalText, setModalText] = useState("");

// 확인 버튼 클릭 시 실행할 함수 (선택 사항)
const [modalOnConfirm, setModalOnConfirm] = useState<(() => void) | null>(null);

 

React를 사용하는 분들은 아시겠지만 정말 기본적인 useState입니다. 

 

주석에도 적혀 있지만 간략하게 설명을 한다면 차례대로

1. modal 상태를 관리할 수 있습니다.
2. modal 제목을 설정할 수 있습니다.
3. modal 내용을 관리할 수 있습니다.
4. modal에서 확인 버튼을 눌렀을 때 로직을 작성할 수 있는 함수입니다.

이제 어떻게 사용하는지 알아볼게요!

 

 

4. Modal 렌더링

---

위에서 말했듯이, 모달이 렌더링되는 조건은 isOpen의 값에 따라 결정됩니다. 따라서 다음과 같이 코드를 작성하시면 됩니다! 

 

※ 작성하고 있는 함수 return안의 가장 상위 tag 아래 적으시면 돼요

 

{
  isOpen && (
    <Modal
      setIsOpen={setIsOpen}
      text={modalText}
      title={modalTitle}
      onConfirm={modalOnConfirm || undefined}
    />
  );
}

 

이제 모달은 isOpen의 값에 따라 렌더링 됩니다.

 

isOpen이 true이면 렌더링, false이면 렌더링X

 

 

5. 모달 띄우기 설정

---

이제 마지막이에요! 모달이 띄워질 환경은 다 만들었으니 모달을 통해 어떤 정보를 표시하고 싶은지 작성해야겠죠?

 

다음과 같이 설정하면 돼요.

setModalTitle("모달 Title");
setModalText("모달 Text");
setModalOnConfirm(() => () => {
  // 확인 버튼 클릭 시 실행할 함수
  // 함수가 없으면 단순히 모달 창이 닫힘
});
setIsOpen(true);

 

setModalOnConfirm이 조금 헷갈릴 수 있어요. 저 부분은 위에도 말했듯, 확인 버튼을 눌렀을 때 추가 로직이 필요할 때만 작성해주면 돼요. 없다면 작성 안해도 Ok!

 

단순히 정보 전달만 하는게 아니라 이후에 페이지 이동과 같은 로직이 필요할 때, 예를 들어 로그인 성공/실패 여부를 표시한다고 생각해봐요.

 

로그인이 성공한다면 확인 버튼을 누르고 다음 페이지로 넘어가야겠죠? 그럴때 페이지 이동 로직을 작성해주면 되는 거에요.

 

 

6. 예시 코드

---

아주 간단한 예시 코드입니다!

 

Open Modal 버튼을 누르면 모달이 뜨도록 해볼게요.

// src/App.tsx
import { useState } from "react";
import { Modal } from "nyeonseok-modal";

function App() {
  const [isOpen, setIsOpen] = useState(false);
  const [modalTitle, setModalTitle] = useState("");
  const [modalText, setModalText] = useState("");
  const [modalOnConfirm, setModalOnConfirm] = useState<(() => void) | null>(
    null
  );

  const modalOpen = () => {
    setModalTitle("모달 Title");
    setModalText("모달 Text");
    setModalOnConfirm(() => () => {
      // 확인 버튼 클릭 시 실행할 로직
      // 생략 시 그냥 모달 닫힘
    });
    setIsOpen(true);
  };

  return (
    <div>
      <button onClick={modalOpen}>Open Modal</button>
      {isOpen && (
        <Modal
          setIsOpen={setIsOpen}
          text={modalText}
          title={modalTitle}
          onConfirm={modalOnConfirm || undefined}
        />
      )}
    </div>
  );
}

export default App;

 

이 코드대로면 Modal Open버튼을 눌렀을 때 제목은 '모달 Title', 내용은 '모달 Text'가 표시된 모달이 뜨겠죠? 

 

다음과 같이 뜹니다!

 

버튼을 누르기 전

 

 

버튼 누른 후

 

 

7. 마무리

---

이렇게 nyeonseok-modal 라이브러리 사용법에 대한 글을 마치도록 하겠습니다!

 

적다보니 라이브러리 이름이 좀 부끄럽긴 하네요,,

 

아 참고 사항으로 몇 가지 더 적자면,

1. modalTitle, modalText 모두 일정 너비를 넘어가면 ... 처리가 됩니다.
2. modalText에서 \n 사용 시 줄바꿈 가능합니다.

 

---

 

 

혹시라도 추가로 들어가면 좋겠는 기능이나 오류가 있다면 말해주세요! 빠르게 반영하도록 하겠습니다.

 

감사합니다!