IT/React

IT/React

[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 op..

IT/React

[react] React에서 모달 팝업창을 구현하는 방법 (1/2)

React에서 모달 팝업창을 구현하는 방법은 여러 가지가 있지만, 대표적으로 다음과 같은 방법이 있습니다. 1. react-modal 라이브러리 사용 react-modal은 React에서 모달 팝업창을 쉽게 구현할 수 있도록 도와주는 라이브러리 입니다. react-modal을 사용하기 위해서는 먼저 해당 라이브러리를 설치해야 합니다. npm install react-modal Modal 컴포넌트를 생성하고, isOpen, onRequestClose 등의 props를 설정합니다. Modal 컴포넌트 아네 필요한 UI를 작성합니다. import React, { useState } from 'react'; import Modal from 'react-modal'; function App() { const [i..

org.woodies.dev
'IT/React' 카테고리의 글 목록