reactjs 및 tailwindcss로 간단한 모달/팝업을 만드는 방법

우리가 만들 것

안녕하십니까, 이 기사에서는 useState 후크를 사용하여 reactjs에서 간단한 팝업 또는 모달 구성 요소를 만드는 방법에 대해 공유합니다. 스타일에는 tailwindcss를 사용할 것입니다.

자세한 내용은 비디오 버전을 확인하십시오.

반응 앱 만들기

먼저 nodejs가 이미 설치되어 있다고 가정하고 create-react-app으로 앱을 만듭니다.

npx create-react-app react-modal

반응 js 프로젝트에 Tailwindcss 추가

reactjs에 tailwindcss를 설치하는 것은 매우 쉽습니다. 이 몇 가지 명령만 필요합니다.
먼저 노드 모듈 폴더 및 기타 폴더와 파일을 볼 수 있는 프로젝트 폴더에 있는지 확인합니다. 그런 다음이 명령을 복사하여 붙여 넣으십시오.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

그런 다음 tailwind.config.js 파일을 업데이트합니다. 이 파일은 프로젝트의 루트, 즉 package.json 파일 옆에 있어야 합니다.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

그런 다음 다음 Add the Tailwind 지시문을 index.css 파일에 추가합니다.

@tailwind base;
@tailwind components;
@tailwind utilities;

Tailwindcss가 구성됨

반응 아이콘 설치

  npm install react-icons

이 패키지는 다양한 아이콘을 사용하는 데 도움이 됩니다. 이 구성 요소의 경우 특히 (IoWarning) 아이콘을 사용해야 합니다. 사용 가능한 모든 아이콘에 대해 체크아웃React-icons할 수 있습니다.

useState Hook을 사용하여 모달 만들기

App.js 파일에서 모델을 트리거할 버튼을 설정합니다.

import { useState } from 'react'
import Modal from './Modal'

function App() {
  const [popUp, setPopUp] = useState(false)

  return (
    <div className='p-20'>
      <div className='flex gap-8 items-center mb-10'>
        <div className='bg-gray-700 text-white w-16 h-16 rounded-full flex items-center justify-center'>
          CK
        </div>
        <div className='flex flex-col justify-center'>
          <h1 className='font-bold text-3xl'>Charles Kasasira</h1>
          <p className='text-gray-700'>Web developer</p>
        </div>
      </div>
      <button className='outline outline-1 px-3 py-2 hover:bg-black hover:text-white'
      onClick={() => setPopUp(true)}
      >Open Modal</button>
      {popUp && <Modal setPopUp={setPopUp} />}
    </div>
  );
}

export default App;

모달 컴포넌트
이것은 우리의 모델 구성 요소입니다. 제 유튜브 채널에서 더 많은 설명을 볼 수 있습니다.

import React from 'react'
import { IoWarning} from 'react-icons/io5'

function Modal({setPopUp}) {
  return (
    <div className='w-screen h-screen bg-black bg-opacity-30 fixed top-0 right-0 flex justify-center items-center'>
      <div className='bg-white p-10 rounded-md shadow-md'>
        <h1 className='font-bold text-center text-lg my-5'>Delete User</h1>
        <p>
          Are you sure you want to delete <b>Charle Kasasira</b>
          <p className='bg-[#ffe9d9] p-2 border-l-2 border-[#fa703f] text-[#bc4c2e] flex flex-col text-sm my-1'>
            <span className='text-[#771505] font-bold flex items-center gap-1'>
              <IoWarning />
              Warning
            </span>
            By Deleting this account, you won't be able to access the system.
          </p>
        </p>
        <div className='flex justify-between mt-5'>
          <button className='outline outline-1 outline-[#101f20] bg-[#101f20] text-white py-2 px-4 hover:bg-transparent hover:text-black'
          onClick={() => setPopUp(false)}
          >No, Cancel</button>
          <button className='outline outline-1 outline-[#101f20] hover:bg-[#101f20] hover:text-white py-2 px-4 bg-transparent text-black'
          onClick={() => console.log("Please like and subscribe")}
          >Yes, Delete</button>
        </div>
      </div>
    </div>
  )
}

export default Modal

그리고 그게 다야. 이것이 도움이 되었기를 바랍니다.