React.js 앱에 팝업 효과 추가

팝업은 사용자의 관심을 끌고 중요한 정보를 표시하는 좋은 방법입니다. 확인 메시지 및 오류 메시지와 같은 용도로 사용할 수 있습니다. 또는 페이지의 요소에 대한 추가 정보를 표시하는 데 사용할 수도 있습니다.

React에서는 팝업을 만드는 두 가지 방법이 있습니다. React hook을 사용하거나 외부 모듈을 사용하는 것입니다.

MAKEUSEOF 오늘의 비디오

React.js에서 팝업을 만드는 방법

첫 번째, 간단한 반응 앱 만들기 . 그런 다음 두 가지 방법 중 하나를 사용하여 팝업을 추가할 수 있습니다. React hooks 또는 외부 모듈을 사용할 수 있습니다.

1. React Hooks 사용하기

후크 접근 방식은 더 간단하고 몇 줄의 코드만 필요합니다.

먼저 팝업을 여는 함수를 만들어야 합니다. 팝업을 표시할 구성 요소에서 이 기능을 정의할 수 있습니다.

다음으로 useState 후크를 사용하여 팝업에 대한 상태 변수를 생성해야 합니다. 이 상태 변수를 사용하여 팝업을 열어야 하는지 여부를 결정할 수 있습니다.

마지막으로 팝업을 트리거할 구성 요소에 버튼을 추가해야 합니다. 이 버튼을 클릭하면 상태 변수를 true로 설정하면 팝업이 나타납니다.

이 접근 방식에 대한 코드를 살펴보십시오.

import React, { useState } from 'react'; 
  
function Example() { 
  const [isOpen, setIsOpen] = useState(false); 
  
  return ( 
    <div> 
      <button onClick={() => setIsOpen(true)}> 
        Open Pop-up 
      </button> 
  
      {isOpen && ( 
       <div> 
        <div> 
          This is the content of the pop-up. 
        </div> 
        <button onClick={() => setIsOpen(false)}> 
           Pop-up 
        </button> 
       </div> 
      )} 
    </div> 
  ); 
} 
  
export default Example;

먼저 이 코드는 핵심 반응 라이브러리에서 useState 후크를 가져옵니다. 그런 다음 Example 함수는 useState 후크를 사용하여 isOpen이라는 상태 변수를 만듭니다. 이 상태 변수는 팝업을 열어야 하는지 여부를 결정합니다.

그런 다음 팝업을 트리거할 구성 요소에 버튼을 추가합니다. 이 버튼을 클릭하면 상태 변수가 true로 설정되어 팝업이 나타납니다.

마지막으로 팝업을 닫을 구성 요소에 버튼을 추가합니다. 이 버튼을 클릭하면 상태 변수가 false로 설정되어 팝업이 사라집니다.

2. 외부 모듈 사용

외부 모듈을 사용하여 React에서 팝업을 만들 수도 있습니다. 이 목적으로 사용할 수 있는 많은 모듈이 있습니다.

인기 있는 모듈 중 하나는 react-modal입니다. react-modal은 React에서 모달 대화 상자를 만들 수 있는 간단하고 가벼운 모듈입니다.

react-modal을 사용하려면 먼저 npm을 사용하여 설치해야 합니다.

npm install react-modal

react-modal을 설치했으면 React 컴포넌트로 가져올 수 있습니다.

import ReactModal from 'react-modal'; 
import React, { useState } from 'react'; 
  
function Example() { 
  const [isOpen, setIsOpen] = useState(false); 
  
  return ( 
    <div> 
      <button onClick={setIsOpen}>Open Modal</button> 
      <ReactModal 
        isOpen={isOpen} 
        contentLabel="Example Modal" 
      > 
        This is the content of the modal. 
      </ReactModal> 
    </div> 
  ); 
} 
  
export default Example;

이 코드에서는 여전히 React 후크를 사용하지만 react-modal 모듈을 사용합니다. react-modal 모듈을 사용하면 팝업에 더 많은 기능을 추가할 수 있습니다. 보시다시피 코드는 이전 접근 방식과 매우 유사합니다. 유일한 차이점은 이제 자신의 구성 요소를 만드는 대신 react-modal의 ReactModal 구성 요소를 사용하고 있다는 것입니다.

먼저 react-modal 모듈을 가져와야 합니다. 그런 다음 ReactModal 구성 요소를 사용하여 팝업 콘텐츠를 래핑합니다. isOpen 소품을 사용하여 모달이 열려 있어야 하는지 여부를 결정합니다.

https://www.windows.com/stopcode

팝업을 만든 후에는 팝업에 추가 기능을 추가할 수 있습니다. 예를 들어 사용자가 팝업 외부를 클릭할 때 팝업을 닫고 싶을 수 있습니다.

이렇게 하려면 react-modal 구성 요소의 onRequest prop을 사용해야 합니다. 이 소품은 함수를 값으로 사용합니다. 이 함수는 사용자가 모달 외부를 클릭할 때 실행됩니다.

예를 들어 사용자가 팝업 외부를 클릭할 때 팝업을 닫으려면 다음 코드를 사용합니다.

import React, { useState } from 'react'; 
import ReactModal from 'react-modal'; 
  
function Example() { 
  const [isOpen, setIsOpen] = useState(false); 
  
  return ( 
    <div> 
      <button onClick={() => setIsOpen(true)}> 
        Open Modal 
      </button> 
      <ReactModal 
        isOpen={isOpen} 
        contentLabel="Example Modal" 
        onRequest={() => setIsOpen(false)} 
      > 
        This is the content of the modal. 
      </ReactModal> 
    </div> 
  ); 
} 
  
export default Example;

onRequest prop에 전달하는 함수는 단순히 isOpen 상태 변수를 false로 설정합니다. 이렇게 하면 모달이 닫힙니다.

ReactModal 구성 요소에 다른 소품을 추가하여 추가로 사용자 지정할 수도 있습니다. props의 전체 목록을 보려면 react-modal 문서를 확인하세요.

팝업에 스타일 추가하기

팝업을 만든 후에는 스타일을 추가할 수 있습니다. React 구성 요소의 스타일을 지정하는 방법에는 여러 가지가 있지만 인라인 스타일에 중점을 둘 것입니다.

인라인 스타일은 React 구성 요소에 직접 추가할 수 있는 스타일입니다. 인라인 스타일을 추가하려면 style 속성을 사용해야 합니다. 이 속성은 개체를 값으로 사용합니다. 여기서 키는 스타일 속성이고 값은 스타일 값입니다.

예를 들어 팝업에 배경색 흰색과 너비 500px를 추가하려면 다음 코드를 사용합니다.

import React from 'react'; 
  
function Example() { 
  return ( 
    <div style={{ backgroundColor: 'white', width: '500px' }}> 
      This is the content of the pop-up. 
    </div> 
  ); 
} 
  
export default Example;

이 코드에서는 backgroundColor 및 width 속성을 사용하여 div 요소에 style 속성을 추가합니다. 당신은 또한 수 반응 앱에서 Tailwind CSS 사용 팝업 스타일을 지정합니다.

팝업으로 전환율 높이기

팝업은 사용자에게 중요한 정보를 표시하여 전환율을 높이는 데 도움이 될 수 있습니다. 예를 들어 팝업을 사용하여 할인 코드 또는 특별 제안을 표시할 수 있습니다. 팝업을 사용하여 뉴스레터의 이메일 주소를 수집할 수도 있습니다. React 앱에 팝업을 추가하는 것은 전환율을 높이는 좋은 방법입니다.

GitHub 페이지에서 무료로 React 애플리케이션을 쉽게 배포할 수도 있습니다.