React에서 CSS를 사용하여 이미지 드래그 앤 드롭 만들기

React는 사용자 인터페이스 구축에 널리 사용되는 JavaScript 라이브러리이며, 유연성과 다양성으로 인해 대화형 애플리케이션 구축에 탁월한 선택입니다. 이 튜토리얼에서는 React에서 CSS만을 사용하여 이미지에 대한 드래그 앤 드롭 기능을 만드는 방법을 보여 드리겠습니다.

1단계 —

시작하려면 React 프로젝트를 설정해 보겠습니다. Create React App 또는 귀하에게 가장 적합한 다른 설정 방법을 사용할 수 있습니다. create-react-app을 이용하여 React 애플리케이션을 만들어 보겠습니다.

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단계 —

이제 src 디렉토리에 새 파일과 구성 요소 ImageContainer.js를 만들고 드래그 앤 드롭 컨테이너용 div를 가져옵니다.

ImageContainer.js

import React from 'react';

const ImageContainer = () => {

    return (
        <div classname="image-container">

        </div>
    );
};

export default ImageContainer;

그런 다음 src 디렉터리에 ImageContainer.css 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);
}

4단계 —

이제 .image-container 클래스 내에서 입력 필드와 입력 텍스트 제목이 있는 div를 가져와 ImageContainer.css 파일에 일부 스타일을 추가하겠습니다. 또한 이미지 URL에 대한 상태와 업데이트 상태에 대한 onChage 함수를 사용합니다.

ImageContainer.js는

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

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

    const onChange = (e) => {
        const files = e.target.files;
        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;
}

5단계 —

이제 조건부로 이미지 파일을 미리 보겠습니다. 이미지를 놓으면 이미지가 렌더링되거나 드래그 앤 드롭 영역이 렌더링됩니다.

ImageContainer.js는

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

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

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

    return (
        <div classname="image-container">
            {
                url ?
                    <img  classname="image-view" alt="React에서 CSS를 사용하여 이미지 드래그 앤 드롭 만들기" >



<h2>
  
  
  Step 6 —
</h2>

<p>Now we will import the ImageContainer component in our App.js and run our application using the npm start command and have fun while coding.</p>

<p><strong>App.js will be</strong><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만을 사용하여 이미지에 대한 드래그 앤 드롭 기능을 만드는 방법을 보여주었습니다.