HTML5 Drag & Drop API로 간단한 DND 구현하기 (React)

 

업무에서 첨부파일 업로드 솔루션을 적용하는 도중 드래그앤드롭을 구현하게 됐다.

라이브러리를 써야할 정도로 다양한 기능이 필요한 것은 아니여서 html5에서 제공하는 드래그앤드롭 API를 사용했다.

 

아주 간단하게 기능만 동작하는 코드를 가져왔다.

 

State 및 상태 관리

const [files, setFiles] = useState([]);

useEffect(() => {
    console.log(files);
}, [files]);

files가 변경될 때마다 로깅한다.

 

드래그 앤 드롭 이벤트 핸들링

// 드래그 중일 때 이벤트 발생
const handleDragOver = (e) => {
    e.preventDefault();
    e.stopPropagation();
};

// 파일을 드래그 영역 위에 떨어트렸을 때 발생
const handleDropFiles = (e) => {
    e.preventDefault();
    e.stopPropagation();

    setFiles(Array.from(e.dataTransfer.files));
};

Drag & Drop 이벤트를 핸들링하는 로직 부분이다.

 

e.preventDefault()를 설정하지 않을 경우 브라우저의 기본 동작이 발생하게 된다.

크롬 브라우저를 예로 들면 파일을 Drop 시 크롬 탭으로 파일이 열리게 된다.

 

또한 이벤트가 다른 상위 요소로 전파되어 의도하지 않은 동작이 발생되는 것을 방지하기 위해 e.stopPropagation()를 설정해줬다.

 

마지막으로 Drop 이후 files에 이벤트로 받은 파일들을 세팅해줬다.

 

 

UI 렌더링

return (
    <>
        <div
            onDragOver={handleDragOver}
            onDrop={handleDropFiles}
            style={{
                width: "500px",
                height: "100px",
                padding: "20px",
                borderRadius: "8px",
                color: "#6E7894",
                border: "1px dashed #B3BAD3",
                backgroundColor: "#F1F3F6",
            }}
        >
            드래그 앤 드롭
        </div>
        <div style={{ marginTop: "20px", marginBottom: "150px" }}>
            <h4>업로드된 파일:</h4>
            {files.map((file, index) => (
                <p key={index}>{file.name}</p>
            ))}
        </div>
    </>
);

UI는 정말 대충 모양새만 알 수 있도록 ... :)

내가 적용할 솔루션의 경우에는 커스텀 Drag and Drop을 만들었기 때문에 DataTransfer 객체로 변환해서 솔루션 업로더에 추가해줘야 했다.

 

이 부분은 완성되면 또 포스팅을 해야겠다.

---

 

전체 코드 확인하기

import React, {useEffect, useState} from "react";

const DragAndDrop = () => {
    const [files, setFiles] = useState([]);

    useEffect(() => {
        console.log(files);
    }, [files]);

    const handleDragOver = (e) => {
        e.preventDefault();
        e.stopPropagation();
    }

    const handleDropFiles = (e) => {
        e.preventDefault();
        e.stopPropagation();

        setFiles(Array.from(e.dataTransfer.files));
    };

    return (
        <>
            <div
                onDragOver={handleDragOver}
                onDrop={handleDropFiles}
                style={{
                    width: "500px",
                    height: "100px",
                    padding: "20px",
                    borderRadius: "8px",
                    color: "#6E7894",
                    border: "1px dashed #B3BAD3",
                    backgroundColor: "#F1F3F6",
                }}>
            </div>
            <div style={{
                marginTop: "20px",
                marginBottom: "150px"
            }}>
                {files.map(file => (<p>{file.name}</p>))}
            </div>
        </>
    )
}

export default DragAndDrop;