React에서 Lightbox 구현하기

 

React를 사용하여 Lightbox를 구현하면 사용자가 이미지를 클릭하여 확대된 뷰를 제공하는 UX를 쉽게 구축할 수 있습니다. 이 글에서는 React에서 Lightbox를 구현하는 기본 방법과 최적화 기법을 소개합니다.

---

1. Lightbox의 기본 개념

Lightbox는 이미지나 콘텐츠를 클릭했을 때, 화면 중앙에 확대된 모달 형태로 콘텐츠를 표시하며, 배경은 어둡게 처리하는 UI 패턴입니다. 이를 통해 사용자 경험을 향상시키고 중요한 콘텐츠에 집중할 수 있도록 돕습니다.

---

2. Lightbox 구현을 위한 주요 구성 요소

Lightbox를 구현하기 위해 필요한 기본 요소는 다음과 같습니다:

1. 이미지 리스트: 클릭 가능한 썸네일 이미지 목록입니다.
2. 모달 컴포넌트: 확대된 이미지를 보여주는 오버레이입니다.
3. 상태 관리: Lightbox의 열림/닫힘 상태와 현재 선택된 이미지를 관리합니다.

---

3. React로 Lightbox 구현하기

3.1 프로젝트 설정

다음은 React 애플리케이션에서 Lightbox를 구현하는 예제입니다. 먼저 create-react-app을 사용하여 프로젝트를 설정합니다:

npx create-react-app react-lightbox
cd react-lightbox
npm start

3.2 기본 컴포넌트 생성

• ImageGallery: 이미지 썸네일 리스트를 표시합니다.
• LightboxModal: 선택된 이미지를 확대하여 보여줍니다.

import React, { useState } from 'react';

const images = [
  { id: 1, src: '/path/to/image1.jpg', alt: 'Image 1' },
  { id: 2, src: '/path/to/image2.jpg', alt: 'Image 2' },
  { id: 3, src: '/path/to/image3.jpg', alt: 'Image 3' },
];

const ImageGallery = () => {
  const [selectedImage, setSelectedImage] = useState(null);

  const openLightbox = (image) => {
    setSelectedImage(image);
  };

  const closeLightbox = () => {
    setSelectedImage(null);
  };

  return (
    <div>
      <div className="image-gallery">
        {images.map((image) => (
          <img
            key={image.id}
            src={image.src}
            alt={image.alt}
            onClick={() => openLightbox(image)}
            style={{ cursor: 'pointer', margin: '10px', width: '100px' }}
          />
        ))}
      </div>

      {selectedImage && (
        <LightboxModal image={selectedImage} onClose={closeLightbox} />
      )}
    </div>
  );
};

const LightboxModal = ({ image, onClose }) => (
  <div className="lightbox-overlay" onClick={onClose} style={overlayStyle}>
    <div className="lightbox-content" style={contentStyle} onClick={(e) => e.stopPropagation()}>
      <img src={image.src} alt={image.alt} style={{ maxWidth: '100%' }} />
      <button onClick={onClose} style={buttonStyle}>Close</button>
    </div>
  </div>
);

const overlayStyle = {
  position: 'fixed',
  top: 0,
  left: 0,
  width: '100%',
  height: '100%',
  backgroundColor: 'rgba(0, 0, 0, 0.8)',
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
};

const contentStyle = {
  position: 'relative',
  backgroundColor: '#fff',
  padding: '20px',
  borderRadius: '8px',
};

const buttonStyle = {
  position: 'absolute',
  top: '10px',
  right: '10px',
  padding: '5px 10px',
};

export default ImageGallery;

---

4. Lightbox 최적화 기법

4.1 메모이제이션 적용

Lightbox 컴포넌트가 불필요하게 렌더링되지 않도록 React.memo를 사용하여 최적화할 수 있습니다.

import React from 'react';

const LightboxModal = React.memo(({ image, onClose }) => (
  <div className="lightbox-overlay" onClick={onClose} style={overlayStyle}>
    <div className="lightbox-content" style={contentStyle} onClick={(e) => e.stopPropagation()}>
      <img src={image.src} alt={image.alt} style={{ maxWidth: '100%' }} />
      <button onClick={onClose} style={buttonStyle}>Close</button>
    </div>
  </div>
));

export default LightboxModal;

4.2 CSS Transition 활용

Lightbox에 애니메이션 효과를 추가하면 UX가 더욱 매끄러워집니다. CSS transition 속성을 사용해 배경 페이드 효과를 구현합니다.

.lightbox-overlay {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.lightbox-overlay.show {
  opacity: 1;
}

---

결론

React에서 Lightbox를 구현하면 이미지를 효과적으로 보여주는 사용자 친화적인 UI를 만들 수 있습니다. 상태 관리, 컴포넌트 최적화, 애니메이션 적용 등 다양한 기술을 조합하여 더 나은 사용자 경험을 제공하세요. Lightbox 컴포넌트는 React의 모듈화된 구조를 활용해 재사용 가능한 형태로 설계할 수 있으며, 복잡한 애플리케이션에서도 간단히 확장 가능합니다.