react-photoswipe-gallery는 React 애플리케이션에서 사용하기 쉬운 PhotoSwipe 갤러리 컴포넌트를 제공합니다.

이 라이브러리를 사용하면 이미지를 클릭했을 때 라이트박스를 통해 큰 이미지로 표시할 수 있습니다.

이제 react-photoswipe-gallery를 설치하고 사용하는 방법을 단계별로 설명하겠습니다.

설치

터미널에서 다음 명령어를 실행하여 photoswipe와 react-photoswipe-gallery를 설치합니다.

npm install photoswipe react-photoswipe-gallery

사용법

1. CSS 추가: photoswipe의 CSS 파일을 애플리케이션에 추가해야 합니다. layout 파일이나 최상위 컴포넌트 파일에 다음과 같이 추가합니다.

import 'photoswipe/dist/photoswipe.css';

2.갤러리와 아이템 컴포넌트 가져오기:

필요한 컴포넌트를 가져옵니다.

import { Gallery, Item } from 'react-photoswipe-gallery';

3.갤러리 컴포넌트로 이미지 감싸기:

모든 이미지를 Gallery 컴포넌트로 감싸서 라이트박스를 활성화합니다.

return (
  <Gallery>
    {/* 이미지 아이템들 */}
  </Gallery>
);

4. 아이템 컴포넌트로 개별 이미지 감싸기:

각 이미지를 Item 컴포넌트로 감싸고, href와 open 함수를 사용합니다.

<Item
  original={imageURL}  // 큰 이미지 URL
  thumbnail={thumbURL} // 썸네일 이미지 URL
  width="1000"         // 원본 이미지 너비
  height="600"         // 원본 이미지 높이
>
  {({ ref, open }) => (
    <img ref={ref} onClick={open} src={thumbURL} alt="Thumbnail" style={{ cursor: 'pointer' }} />
  )}
</Item>

5.완성된 예제:
 

import React from 'react';
import 'photoswipe/dist/photoswipe.css';
import { Gallery, Item } from 'react-photoswipe-gallery';

const PropertyImages = ({ images }) => {
  return (
    <Gallery>
      {images.map((image, index) => (
        <Item
          key={index}
          original={image.original}
          thumbnail={image.thumbnail}
          width="1000"
          height="600"
        >
          {({ ref, open }) => (
            <img ref={ref} onClick={open} src={image.thumbnail} alt="Property" style={{ cursor: 'pointer' }} />
          )}
        </Item>
      ))}
    </Gallery>
  );
};

export default PropertyImages;

요약

1. photoswipe와 react-photoswipe-gallery 설치
2. photoswipe CSS 파일을 프로젝트에 추가
3. Gallery와 Item 컴포넌트를 가져와 사용
4. 모든 이미지를 Gallery로 감싸고, 각 이미지를 Item으로 감싸서 라이트박스 기능 추가

이렇게 하면 React 애플리케이션에서 손쉽게 라이트박스 기능을 구현할 수 있습니다.