React 애플리케이션에서 React-Bootstrap 모달 사용하기

1. React의 부트스트랩 3 모달
2. React의 부트스트랩 4 및 5 모달

이전에 모달을 접한 적이 있을 것입니다. 팝업처럼 보이며 특정 버튼을 클릭하거나 다른 작업을 수행한 후에 나타납니다. 자신의 React 애플리케이션에서도 기능을 사용할 수 있습니다.

모달을 올바르게 사용하면 React 앱의 사용자 경험을 개선할 수 있습니다.

웹사이트의 필수 기능에 대한 사용자의 관심을 끌거나 의견을 받는 데 매우 효과적입니다. 예를 들어, 사용자가 실수로 중요한 UI 항목을 삭제하기 위해 클릭한 경우 모달을 사용하여 선택에 대한 확신이 있는지 물어볼 수 있습니다.

React 앱을 개발할 때 일반 JavaScript, HTML 및 CSS를 사용하여 사용자 지정 Modal 구성 요소를 만들 수 있습니다. 그러나 사용자 지정 솔루션이 필요한 경우가 아니면 Bootstrap과 같은 UI 라이브러리의 모달을 사용하여 많은 시간을 절약할 수 있습니다.

React의 부트스트랩 3 모달

React-Bootstrap은 React에 맞게 조정된 인기 라이브러리 버전입니다. 원래 Bootstrap 버전 3에서 기대하는 것과 동일한 기능과 기능을 가진 사용자 지정 React 구성 요소를 제공합니다.

React-Bootstrap과 같은 라이브러리를 사용하면 처음부터 작성하지 않고도 일반적인 UI 요소를 사용할 수 있습니다.

이 라이브러리에서 가져온 Modal 구성 요소는 필요한 모든 기능을 제공합니다. 가져온 후에는 더 이상 React 패턴에 반하여 DOM을 직접 변경할 필요가 없습니다.

쉘을 열고 다음 명령을 입력하여 설치할 수 있습니다.

npm install react-bootstrap

react-bootstrap 라이브러리의 가장 좋은 점은 개별 구성 요소를 개별적으로 가져올 수 있다는 것입니다. 이렇게 하면 패키지 크기를 최소화하고 앱을 더 빠르게 로드할 수 있습니다.

React-Bootstrap 라이브러리의 모달을 포함하는 가장 쉬운 방법은 애플리케이션 상단에 import 문을 선언하는 것입니다.

import Modal from 'react-bootstrap/Modal';

React-Bootstrap 라이브러리의 유일한 단점은 Bootstrap 3만 지원한다는 것입니다.

React-Bootstrap 라이브러리는 Modal 구성요소의 모양과 기능을 사용자 정의할 수 있는 많은 자유를 제공합니다. 애니메이션, 브라우저에서의 위치, 크기 등을 조정할 수 있습니다. 공식 가이드를 읽고 React-Bootstrap 모달에 대해 자세히 알아보세요.

React의 부트스트랩 4 및 5 모달

Bootstrap 4 또는 최신 버전 5를 사용하려면 react-strap 패키지를 사용하는 것이 가장 좋습니다. 이 패키지에는 스타일이 없으므로 핵심 bootstrap 패키지를 설치하고 CSS 파일을 가져와야 합니다.

react-strap 패키지를 설치하려면 명령줄을 열고 다음 코드를 입력해야 합니다.

npm install reactstrap

설치가 완료되면 Modal 구성 요소를 애플리케이션으로 가져올 수 있습니다. 다음은 예입니다.

import React from 'react';
import { Modal } from 'reactstrap';

Modal 컴포넌트는 React를 위해 특별히 제작되었습니다. isOpen, toggle 및 size와 같은 소품을 사용하여 동작을 사용자 정의할 수 있습니다. 페이드 애니메이션을 활성화 또는 비활성화하도록 선택할 수도 있습니다.

react-strap 패키지는 구성 요소의 동작을 사용자 정의할 수 있는 많은 자유를 제공합니다. 사용할 수 있는 옵션에 대해 자세히 알아보려면 공식 react-strap 문서를 확인하십시오.