모달창 라이브러리 (react-modal)

npm: react-modal

Accessible modal dialog component for React.JS. Latest version: 3.16.1, last published: 2 years ago. Start using react-modal in your project by running `npm i react-modal`. There are 2934 other projects in the npm registry using react-modal.

https://www.npmjs.com/package/react-modal?activeTab=readme

import Modal from 'react-modal';

	const [isModalOpen, setIsModalOpen] = useState(false);
	const [selectedImage, setSelectedImage] = useState<string | null>(null);

	useEffect(() => {
		// 모달이 앱의 특정 요소를 기준으로 접근성을 유지하도록 설정
		Modal.setAppElement('#root'); // '#root'는 애플리케이션의 루트 요소 ID입니다.
	}, []);

	const openModal = (image: string) => {
		setSelectedImage(image);
		setIsModalOpen(true);
	};

	const closeModal = () => {
		setIsModalOpen(false);
		setSelectedImage(null);
	};

	<StyledRoomCardImg
									key={`Room-detail-img-${index}`}
									src={image}
									onClick={() => {
										openModal(image);
									}} // 이미지 클릭 시 모달 열기
								/>

<Modal
					isOpen={isModalOpen}
					onRequestClose={closeModal}
					style={{
						overlay: {
							backgroundColor: 'rgba(0, 0, 0, 0.75)',
							zIndex: 1000
						},
						content: {
							top: '50%',
							left: '50%',
							right: 'auto',
							bottom: 'auto',
							marginRight: '-50%',
							transform: 'translate(-50%, -50%)',
							padding: '0.5rem',
							borderRadius: '10px',
							backgroundColor: 'rgba(0, 0, 0, 0.75)',
							width: '90%'
						}
					}}
				>
					{selectedImage && <img src={selectedImage} alt="Selected" style={{ width: '100%', height: 'auto' }} />}
				</Modal>

Modal 속성 설명

1. isOpen={isModalOpen}:
• 모달이 열려 있는지 여부를 결정하는 속성
• isModalOpen은 useState 훅을 통해 관리되는 상태 값으로, true일 때 모달이 열리고 false일 때 모달이 닫힘

2. onRequestClose={closeModal}:
• 모달 바깥을 클릭하거나 "ESC" 키를 눌렀을 때 모달을 닫기 위해 실행되는 함수
• closeModal은 모달을 닫기 위해 isModalOpen 상태를 false로 변경하는 함수

const closeModal = () => {
   setIsModalOpen(false);
   setSelectedImage(null);
};

style 속성 설명

overlay

• backgroundColor: 'rgba(0, 0, 0, 0.75)': 반투명한 검은색 배경을 설정.
→ 모달이 열린 동안 배경의 내용이 흐리게 보이도록 함

• zIndex: 1000: 모달을 화면의 다른 요소들보다 위에 배치하는 속성

• z-index: 레이어의 순서를 설정하는 CSS 속성

content

• top: '50%', left: '50%': 모달을 화면 중앙에 위치시키기 위한 좌표 설정

• right: 'auto', bottom: 'auto': right와 bottom 좌표를 자동으로 설정하여 모달이 수평 및 수직 중앙에 위치할 수 있도록

• marginRight: '-50%': 수평 중앙 정렬을 보정

• transform: 'translate(-50%, -50%)': 화면의 가운데로 모달을 이동

• padding: '0.5rem': 모달 내부에 패딩(여백)을 추가하여 내용이 모달의 가장자리에 붙지 않도록

selectedImage && <img src={selectedImage} alt="Selected" style={{ width: '100%', height: 'auto' }} />

• 이 부분은 selectedImage가 존재할 때만 이미지를 렌더링

• src={selectedImage}: selectedImage 변수에 저장된 이미지 경로

• style={{ width: '100%', height: 'auto' }}: 이미지를 모달 내부에 맞게 표시하며, 너비는 100%로 설정되고 높이는 자동으로 조정

동작 방식

1. 모달을 열 때, isModalOpen이 true가 되고, 모달이 화면에 표시

2. 오버레이가 반투명 검은색으로 배경을 덮으며, 모달은 중앙에 위치

3. 모달의 콘텐츠로 selectedImage가 존재할 경우 해당 이미지가 화면에 표시

4. 모달 바깥을 클릭하거나 ESC 키를 누르면 onRequestClose가 호출되어 isModalOpen이 false로 변경되고 모달이 닫힘