[react] React에서 모달 팝업창을 구현하는 방법 (2/2) - 스크롤 적용하기

구현한 모달창에서 화면이 잘리는 경우가 있습니다. 스크롤을 가능하도록 설정하는 방법에 대해 알아보겠습니다.

 

React-modal에서 모달내부 컨텐츠의 스크롤이 가능하도록 하려면?

• 'aria-describedby'를 추가하고, 'overlayClassNme' prop를 사용하여 모달 내부 요소에 스크롤을 적용합니다.

아래는 스크롤을 적용하는 예시입니다.

import React, { useState } from 'react';
import Modal from 'react-modal';

Modal.setAppElement('#root'); // 모달을 띄울 root 요소를 지정합니다.

function App() {
  const [isOpen, setIsOpen] = useState(false);

  const openModal = () => setIsOpen(true);
  const closeModal = () => setIsOpen(false);

  return (
    <div>
      <button onClick={openModal}>Open Modal</button>
      <Modal
        isOpen={isOpen}
        onRequestClose={closeModal}
        contentLabel="Example Modal"
        overlayClassName="overlay"
        className="modal"
      >
        <div id="modal-scrollable" className="modal-scrollable">
          {/* 스크롤 가능한 컨텐츠 */}
        </div>
      </Modal>
    </div>
  );
}

• overlayClassName : 모달을 띄울 때 뒷 배경을 어둡게 만들어주는 레이어의 클래스 이름
• className : 모달 요소의 클래스 이름

 

• modal-scrollable 클래스 이름을 가진 div 요소를 생성하고, 이 요소 안에 스크롤 가능한 컨텐츠를 추가합니다.

---

그리고 CSS 파일에서 다음과 같이 스크롤을 추가하도록 합니다.

.overlay {
  background-color: rgba(0, 0, 0, 0.5);
}

.modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  max-height: 80%;
  overflow-y: auto;
}

.modal-scrollable {
  height: 100%;
  overflow-y: auto;
}

• .modal {}:  모달 요소의 스타일을 지정하는 데 사용되며, max-height와 overflow-y 속성을 사용하여 모달 요소의 높이를 제한하고, 스크롤을 적용합니다.
• .modal-scrollable {} : 스크롤 가능한 요소의 스타일을 지정하는 데 사용되며, height와 overflow-y 속성을 사용하여 요소의 높이를 100%로 지정하고, 스크롤을 적용합니다.

 

이렇게 react-modal을 사용하여 스크롤이 가능한 모달을 만들 수 있습니다.