React에서 이미지 드래그 앤 드롭을 구현하는 방법

CSS만 사용하여 React에서 이미지 드래그 앤 드롭을 구현하는 방법

React는 대화형 UI 구축으로 널리 알려져 있습니다. 이 튜토리얼에서는 CSS만으로 React에서 이미지에 대한 드래그 앤 드롭 기능을 만드는 방법을 안내합니다.

1단계: React 프로젝트 설정

React 프로젝트를 설정하는 것부터 시작하세요. create-react-app을 사용하면 쉽게 설정할 수 있습니다.

npx create-react-app drag-and-drop

2단계: App.js 및 App.css 업데이트

다음으로 App.js 파일을 수정하여 이미지와 제목에 대한 컨테이너를 만듭니다.

import './App.css';

function App() {
  return (
    <div classname="App">
      <h2 id="Select-Image">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;
}

3단계: ImageContainer 구성 요소 생성

새 파일 ImageContainer.js를 만들고 기본 드래그 앤 드롭 컨테이너를 정의합니다.

import React from 'react';

const ImageContainer = () => {
  return (
    <div classname="image-container"></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);
}

4단계: 이미지 업로드 기능 추가

사용자를 위한 파일 입력 및 텍스트 지침으로 ImageContainer를 강화하세요.

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;

업로드 컨테이너 스타일을 지정합니다.

.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;
}

5단계: 이미지 미리보기

업로드된 이미지나 드래그 앤 드롭 영역을 조건부로 렌더링하도록 구성요소를 수정하세요.

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" alt="React에서 이미지 드래그 앤 드롭을 구현하는 방법" >



<h3>
  
  
  Step 6: Import and Run the Application
</h3>

<p>Finally, import ImageContainer into App.js and run the app.<br>
</p>

<pre class="brush:php;toolbar:false">import './App.css';
import ImageContainer from './ImageContainer';

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

export default App;

이제 앱을 실행하고 React와 CSS로 이미지 드래그 앤 드롭 기능을 코딩해 보세요.

---

이 튜토리얼에서는 React를 사용하여 이미지에 대한 기본 드래그 앤 드롭 영역을 설정하고, 파일 입력 및 CSS를 활용하여 스타일을 지정하고, 이미지 미리보기를 처리하는 방법을 다룹니다.