React와 CSS만으로 이미지 드래그앤드롭 기능 구현하기

React로 드래그앤드롭 이미지 업로드 구현하기

현대 웹 어플리케이션에서는 이미지 업로드가 필수적인 기능입니다. 이 글에서는 React와 CSS를 활용하여 드래그앤드롭 방식으로 이미지를 업로드하는 기능을 구현하는 방법을 다뤄보겠습니다. 이 글은 참고 블로그에서 영감을 얻어 작성되었습니다.

시작하기: React 프로젝트 설정

먼저, React 프로젝트를 구축해야 합니다. 이는 create-react-app 툴을 사용하여 쉽게 설정할 수 있습니다.

npx create-react-app drag-and-drop

App.js 및 App.css 파일 업데이트

프로젝트 설정이 완료되었으면, App.js 파일을 수정하여 이미지 컨테이너를 생성하고 제목을 추가합니다.

App.js:

import './App.css';

function App() {
  return (
    <div className="App">
      <h2 className="heading">Select Image:</h2>
      <div className="image-area"></div>
    </div>
  );
}

export default App;

App.css:

.App {
  text-align: center;
  width: 100vw;
  height: 100vh;
}

.heading {
  font-size: 32px;
  font-weight: 500;
}

이미지 컨테이너 컴포넌트 생성

이제 ImageContainer라는 새로운 컴포넌트를 생성하여 드래그앤드롭 기능을 구현합니다. 이를 위해 ImageContainer.js 파일을 생성합니다.

ImageContainer.js:

import React from 'react';

const ImageContainer = () => {
  return (
    <div className="image-container"></div>
  );
};

export default ImageContainer;

그리고 다음과 같이 ImageContainer.css 파일을 생성하여 스타일을 적용합니다.

ImageContainer.css:

.image-container {
  width: 60%;
  height: 90%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed rgba(0, 0, 0, .3);
}

이미지 업로드 기능 추가

다음으로, 사용자가 이미지를 업로드할 수 있도록 파일 입력과 안내 문구를 추가합니다.

ImageContainer.js:

import React from 'react';
import './ImageContainer.css';

const ImageContainer = () => {
  const [url, setUrl] = React.useState('');

  const onChange = (e) => {
    const files = e.target.files;
    if (files.length > 0) {
      setUrl(URL.createObjectURL(files[0]));
    }
  };

  return (
    <div className="image-container">
      <div className="upload-container">
        <input
          type="file"
          className="input-file"
          accept=".png, .jpg, .jpeg"
          onChange={onChange}
        />
        <p>Drag & Drop here</p>
        <p>or</p>
        <p>Click</p>
      </div>
    </div>
  );
};

export default ImageContainer;

ImageContainer.css:

.image-container {
  width: 60%;
  height: 90%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed rgba(0, 0, 0, .3);
}

.upload-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: white;
}

.upload-container > p {
  font-size: 18px;
  margin: 4px;
  font-weight: 500;
}

.input-file {
  display: block;
  border: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
}

미리보기 기능 구현

마지막으로, 업로드된 이미지를 화면에 미리보기할 수 있는 기능을 추가합니다.

ImageContainer.js:

import React from 'react';
import './ImageContainer.css';

const ImageContainer = () => {
  const [url, setUrl] = React.useState('');

  const onChange = (e) => {
    const files = e.target.files;
    if (files.length > 0) {
      setUrl(URL.createObjectURL(files[0]));
    }
  };

  return (
    <div className="image-container">
      {url ? (
        <img className="image-view" style={{ width: '100%', height: '100%' }} src={url} alt="" />
      ) : (
        <div className="upload-container">
          <input
            type="file"
            className="input-file"
            accept=".png, .jpg, .jpeg"
            onChange={onChange}
          />
          <p>Drag & Drop here</p>
          <p>or <span style={{ color: "blue" }}>Browse</span></p>
        </div>
      )}
    </div>
  );
};

export default ImageContainer;

애플리케이션 실행

마지막으로 ImageContainer 컴포넌트를 App.js에 임포트하고 애플리케이션을 실행합니다.

App.js:

import './App.css';
import ImageContainer from './ImageContainer';

function App() {
  return (
    <div className="App">
      <h2 className="heading">Select Image:</h2>
      <div className="image-area">
        <ImageContainer />
      </div>
    </div>
  );
}

export default App;

이제 애플리케이션을 실행하여 React와 CSS만으로 구현한 이미지 드래그앤드롭 기능을 경험해보세요!

추가적인 참고 자료

더 많은 정보와 도움이 될만한 자료들은 다음의 링크를 참조해 주세요:

• React 공식 문서
• CSS 파일 구조 및 스타일링에 관한 가이드

위 방법을 통해 여러분도 React 어플리케이션에 쉽게 드래그앤드롭 기능을 추가해 보세요. 사용자 경험이 한층 더 향상될 것입니다.