[React] 갤러리 화면에서 이미지 모달창 기능 구현하기(Typescript)

이전 포스팅에서 갤러리 화면을 띄워보았다. 여기서 더 나아가 이미지를 클릭했을 때 원본 크기로 모달창이 나오도록 구현해 보도록 하겠다.

 

작업 시작 전 아직 갤러리 화면을 구현하지 않았다면 이전 포스팅을 참고하여 진행하자.

 

2024.08.08 - [프론트엔드 개발/React] - [React] 간단한 갤러리 화면 구현하기(Typescript)

[React] 간단한 갤러리 화면 구현하기(Typescript)

 

1. 라이브러리 설치

이전에 react-photo-album이라는 라이브러리를 다운 받았는데 여기서 만든 추가 라이브러리인 yet-another-react-lightbox를 다운받으면 미리 보기 화면처럼 이미지를 클릭했을 때 모달창을 띄워주고 슬라이드 쇼 까지 할 수 있게 만들어 준다.

 

아래의 명령어로 라이브러리를 설치해준다.

npm i yet-another-react-lightbox

 

2. 모달창 구현하기

다음으로 Gallery.tsx에서 설치한 라이브러리를 불러와서 사용하면 된다. 아래의 코드를 입력하고 한번 살펴보자

#Gallery.tsx

import { useState } from "react";
import PhotoAlbum from "react-photo-album";
import "react-photo-album/styles.css";
import styled from 'styled-components';
import tw from 'twin.macro';
import photos from "./photos";

import Lightbox from "yet-another-react-lightbox";  // 라이트 박스 라이브러리 불러오기
import "yet-another-react-lightbox/styles.css";

const Gallery = () => {

  const [index, setIndex] = useState(-1); //usestate를 통해 이미지 인덱스 상태 값을 추가한다.

    return(
    <Wrapper>
      <PhotoAlbum 
      layout="rows" 
      photos={photos} 
      targetRowHeight={150} 
      onClick={({ index: current }) => setIndex(current)} />
    
      <Lightbox
        slides={photos}
        open={index >= 0}
        index={index}
        close={() => setIndex(-1)}
        />
      
    </Wrapper>


    );
}

const Wrapper = styled.div`${tw `sm:w-96 mx-auto p-4 shadow-md`}`

export default Gallery

 

먼저 import Lightbox from "yet-another-react-lightbox"; 와 import "yet-another-react-lightbox/styles.css"; 를 통해 필요한 모듈을 가져온다. 그다음으로 usestate를 통해 이미지 인덱스 상태 값을 추가해서 이미지 클릭 시 이미지의 인덱스 값을 받아 Lightbox가 선택한 이미지를 불러올 수 있도록 한다.

 

이제 웹페이지를 실행해 보면 다음과 같이 이미지를 클릭했을 때 모달창이 나오게 된다.

이미지를 클릭했을 때 나오는 화면

 

그런데 이렇게만 하면 뭔가 많이 부족해 보인다. 배경화면도 어둡고 다른 추가기능도 없이 허전하다. 그래서 Lightbox 컴포넌트에 추가 속성을 부여해서 모달창 화면을 꾸밀 수 있다.

 

3. 모달창 추가기능 사용

먼저 스타일 속성을 통해 배경화면을 투명하게 만들어 준다.

   <Lightbox
        styles={{
          root: { "--yarl__color_backdrop": "rgba(0, 0, 0, .8)" }, //스타일 속성 추가
        }}
        slides={photos}
        open={index >= 0}
        index={index}
        close={() => setIndex(-1)}
        />

 

그러면 아까와는 다르게 배경이 투명해진 모습을 볼 수 있다.

 

배경이 달라진 모습

 

그리고 이제 각종 추가 기능을 사용해 보겠다. 먼저 추가 기능을 불러와 주고 Lightbox 컴포넌트에 plugins 속성에 불러온 기능을 입력해 주면 된다. 여기서는 간단하게 풀스크린, 슬라이드쇼, 썸네일 기능을 넣어보겠다.

 

import { useState } from "react";
import PhotoAlbum from "react-photo-album";
import "react-photo-album/styles.css";
import styled from 'styled-components';
import tw from 'twin.macro';
import photos from "./photos";

import Lightbox from "yet-another-react-lightbox";  // 라이트 박스 라이브러리 불러오기
import "yet-another-react-lightbox/styles.css";

// 라이트 박스 추가 기능 불러오기
import Fullscreen from "yet-another-react-lightbox/plugins/fullscreen";
import Slideshow from "yet-another-react-lightbox/plugins/slideshow";
import Thumbnails from "yet-another-react-lightbox/plugins/thumbnails";
import "yet-another-react-lightbox/plugins/thumbnails.css";

const Gallery = () => {

  const [index, setIndex] = useState(-1); //usestate를 통해 이미지 인덱스 상태 값을 추가한다.

    return(
    <Wrapper>
      <PhotoAlbum 
      layout="rows" 
      photos={photos} 
      targetRowHeight={150} 
      onClick={({ index: current }) => setIndex(current)} />
    
      <Lightbox
        styles={{
          root: { "--yarl__color_backdrop": "rgba(0, 0, 0, .8)" }, //스타일 속성 추가
        }}
        slides={photos}
        open={index >= 0}
        index={index}
        close={() => setIndex(-1)}
        // 라이트 박스 추가 기능 활성화
        plugins={[Fullscreen, Slideshow, Thumbnails]}
        />
    </Wrapper>


    );
}

const Wrapper = styled.div`${tw `sm:w-96 mx-auto p-4 shadow-md`}`

export default Gallery

 

이렇게 하면 오른쪽 상단에 슬라이드쇼, 전체화면 버튼이 생기고, 하단에 썸네일이 추가된 것이 보인다.

 

플러그인 추가 했을 때 모습

 

이렇게 해서 갤러리를 만들고 모달창까지 라이브러리를 사용해서 만들어 보았다. 간단하게 라이브러리를 사용해서 만들어 보니 편리한 거 같다. 그런데 이미지 용량이 크면 사용할 때 이미지를 랜더링 할때 느려서 실제로 사용할 때 고려해봐야 할 것 같다.