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

갤러리 기능을 구현하여 이미지를 masonry 레이아웃으로 화면에 나타내고 이미지를 클릭했을 때 미리 보기 기능을 구현해 보려고 한다. 이러한 기능을 구현하기에 괜찮은 라이브러리를 찾게 되었는데 React Photo Album,Yet Another React Lightbox 두 가지 라이브러리를 사용하면 내가 원하는 기능을 구현할 수 있다.

 

다양한 레이아웃으로 표현할 수 있고, 이미지 미리보기 기능까지 사용할 수 있는 라이브러리다.

 

해당 라이브러리는 타입 스크립트를 사용하며 공식 문서는 아래 페이지를 참고하면 된다.

 

React Photo Album

 

Yet Another React Lightbox

 

오늘 할 작업은 먼저 이미지를 내가 원하는 형태로 띄워보는 작업을 진행하고 다음으로 미리 보기 기능을 구현해 보도록 하겠다.

1. 라이브러리 설치하기

이미지를 띄우기 위한 라이브러리는 react-photo-album이다. 터미널을 열어 아래의 명령어로 라이브러리를 설치한다.

npm i react-photo-album

 

2. 갤러리 구현하기

2-1. 이미지 및 폴더 생성

라이브러리를 설치했다면 사진 파일을 src/assets 경로에 넣어준다.

(참고로 고화질 이미지의 경우 랜더링 시 속도가 너무 느려 이미지가 보이지 않으니 이점 주의해서 사용하자)

이미지 파일 경로

이제 src에 Gallery라는 폴더를 하나 생성하고 거기에 Gallery.tsx파일과 photos.tsx 파일을 각각 생성해 준다.

다음으로 photos.tsx에서 아까 저장해 두었던 이미지 파일을 불러와보도록 한다.

Gallery 폴더

2-2. 라이브러리 사용 및 구현

photos.tsx 파일에서 이미지 파일을 불러오기 위해 photos 파일을 불러와 준다.

#photos.tsx

const photos = [
      { src: "./src/assets/image1.jpg", width: 400, height: 600 },
      { src: "./src/assets/image2.jpg", width: 1600, height: 900 },
      { src: "./src/assets/image3.jpg", width: 800, height: 600 },
      { src: "./src/assets/image4.jpg", width: 1200, height: 900 },
      { src: "./src/assets/image5.jpg", width: 1200, height: 600 },
      { src: "./src/assets/image6.jpg", width: 600, height: 900 },
      { src: "./src/assets/image7.jpg", width: 400, height: 600 },
      { src: "./src/assets/image8.jpg", width: 1200, height: 900 },
      { src: "./src/assets/image9.jpg", width: 800, height: 600 },
      { src: "./src/assets/image10.jpg", width: 1600, height: 900 },
];

  export default photos;

src 속성에 경로를 주고 width와 height를 지정하여 크기를 설정한다.

 

다음으로 Gallery.tsx을 열어 다음과 같이 코드를 입력한다.

#Gallery.tsx

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";


const Gallery = () => {

    return(
        <Wrapper>
            <PhotoAlbum layout="rows" photos={photos} targetRowHeight={150} />
        </Wrapper>

    );
}

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

export default Gallery

 

PhotoAlubm의 layout 속성을 통해 레이아웃 종류를 설정할 수 있다. 레이아웃 종류는 rows, columns, masonry 이렇게 3종류가 있다. photos 속성에는 아까 이미지 파일 경로를 지정한 photos.tsx를 값으로 넣어주며 targetRowheight를 통해 전체 높이를 설정한다.

 

여기서 index.css에 body태그의 속성에 display:flex를 주면 이미지가 안 보인다... 그래서 PhotoAlbum 컴포넌트에 tailwind를 이용해서 Wrapper 컴포넌트를 하나 만들고 너비 스타일을 설정하고 다시 PhotoAlbum  컴포넌트를 감싸 주니까 바로 나온다.

 

다음으로 App.tsx 파일을 열어 gallery 컴포넌트를 불러오면 완성할 수 있다.

import './App.css'
import Gallery from './Gallery/Gallery.tsx'


function App() {

  return (
    <>
      <Gallery/>
    </>
  )
}


export default App

 

2-3. 구현 화면

이제 터미널로 npm run dev를 실행시켜 만든 웹페이지로 들어가 보면 아래처럼 이미지가 나온다.

 

완성된 화면

 

여기까지 간단하게 갤러리 ui을 구성해 보았다. 다음 포스팅에서는 반응형을 위한 이미지 크기 설정과 이미지를 클릭했을 때 미리 보기 모달창이 나오도록 Yet Another React Lightbox 라이브러리를 사용해서 최종적으로 완성해 보겠다.