자바스크립트와 React.js로 구현한 사진 갤러리 애플리케이션 제작 방법

09 Nov 2023

javascript

이번 포스트에서는 자바스크립트와 React.js를 사용하여 사진 갤러리 애플리케이션을 제작하는 방법에 대해 알아보겠습니다. 사진 갤러리는 사용자가 업로드한 사진을 보여주고, 클릭하면 큰 사이즈의 사진을 모달로 보여주는 기능을 가지고 있습니다. 따라서 이 애플리케이션은 사용자가 업로드한 사진을 저장하고 관리하는 기능과 함께, 썸네일과 모달로 큰 사이즈의 사진을 보여주는 기능을 구현해야 합니다.

사전 준비

이 애플리케이션을 구현하기 위해 다음의 사전 준비가 필요합니다.

Node.js 및 npm 설치
React.js 프로젝트 생성

npx create-react-app photo-gallery
cd photo-gallery

컴포넌트 구성

이제 프로젝트 디렉토리에 필요한 컴포넌트들을 생성해보겠습니다.

PhotoUploader 컴포넌트: 사용자가 사진을 업로드할 수 있는 기능을 제공합니다.
Thumbnail 컴포넌트: 업로드된 사진의 썸네일을 보여줍니다.
Modal 컴포넌트: 클릭한 사진의 큰 사이즈 사진을 모달로 보여줍니다.
PhotoGallery 컴포넌트: Thumbnail 컴포넌트와 Modal 컴포넌트를 통합하여 전체적인 사진 갤러리 애플리케이션을 구성합니다.

자바스크립트와 React.js를 활용한 구현

PhotoUploader 컴포넌트

사용자가 사진을 업로드하고 서버에 저장하는 기능을 PhotoUploader 컴포넌트에서 구현합니다. 이 때 react-dropzone 라이브러리를 사용하여 드롭존을 생성하고 사진을 업로드하도록 합니다.

import React from 'react';
import { useDropzone } from 'react-dropzone';

function PhotoUploader() {
  const { acceptedFiles, getRootProps, getInputProps } = useDropzone();

  const fileItems = acceptedFiles.map(file => (
    <li key={file.path}>{file.path}</li>
  ));

  return (
    <div {...getRootProps()}>
      <input {...getInputProps()} />
      <p>사진을 업로드하세요.</p>
      <ul>{fileItems}</ul>
    </div>
  );
}

export default PhotoUploader;

Thumbnail 컴포넌트

Thumbnail 컴포넌트는 업로드된 사진의 썸네일을 보여주는 역할을 합니다. 이 컴포넌트는 react-grid-gallery 라이브러리를 사용하여 간단하게 구현할 수 있습니다.

import React from 'react';
import Gallery from 'react-grid-gallery';

function Thumbnail() {
  const images = [
    {
      src: 'path/to/image1.jpg',
      thumbnail: 'path/to/image1-thumbnail.jpg',
      thumbnailWidth: 320,
      thumbnailHeight: 212
    },
    {
      src: 'path/to/image2.jpg',
      thumbnail: 'path/to/image2-thumbnail.jpg',
      thumbnailWidth: 320,
      thumbnailHeight: 212
    },
    // ...
  ];

  return <Gallery images={images} />;
}

export default Thumbnail;

Modal 컴포넌트는 클릭한 사진의 큰 사이즈 사진을 모달로 보여주는 역할을 합니다. 이 때 react-modal 라이브러리를 활용하여 모달을 생성합니다.

import React, { useState } from 'react';
import Modal from 'react-modal';

function ModalViewer() {
  const [modalIsOpen, setModalIsOpen] = useState(false);

  const openModal = () => setModalIsOpen(true);
  const closeModal = () => setModalIsOpen(false);

  return (
    <div>
      <button onClick={openModal}>사진 보기</button>
      <Modal isOpen={modalIsOpen} onRequestClose={closeModal}>
        <h2>사진 모달</h2>
        <img src="path/to/large/image.jpg" alt="Large Image" />
        <button onClick={closeModal}>닫기</button>
      </Modal>
    </div>
  );
}

export default ModalViewer;

PhotoGallery 컴포넌트

PhotoGallery 컴포넌트는 Thumbnail 컴포넌트와 Modal 컴포넌트를 통합하여 전체적인 사진 갤러리 애플리케이션을 구성합니다.

import React from 'react';
import PhotoUploader from './PhotoUploader';
import Thumbnail from './Thumbnail';
import ModalViewer from './ModalViewer';

function PhotoGallery() {
  return (
    <div>
      <h1>사진 갤러리</h1>
      <h2>사진 업로드</h2>
      <PhotoUploader />
      <h2>썸네일</h2>
      <Thumbnail />
      <h2>모달</h2>
      <ModalViewer />
    </div>
  );
}

export default PhotoGallery;

마무리

이렇게 자바스크립트와 React.js를 활용하여 사진 갤러리 애플리케이션을 제작하는 방법을 알아보았습니다. 이를 기반으로 더 다양한 기능을 추가해보세요. 사진 태그, 사진 검색 기능 등을 추가하여 사용자 경험을 향상시킬 수 있습니다.

해시태그: #자바스크립트 #React.js