이 글은 웹 스토리지 서비스를 개발하며 file dropzone을 만든 경험을 공유해보려고 합니다.

💡 개발을 하게 된 계기웹 스토리지를 개발하면서 파일 업로드 기능이 필요하고, Drag & Drop 방식을 통한 업로드는 필수적인 기능이었습니다.
React에서 파일을 Drag & Drop으로 업로드할 때 자주 사용되는 react-dropzone이라는 라이브러리가 있습니다. 처음에는 이 라이브러리를 사용해 구현하려고 계획했습니다.

npmjs의 Weekly Downloads 수치를 보면 많은 개발자들이 이 라이브러리를 사용하고 있다는 것을 알 수 있습니다.
하지만 이 라이브러리를 사용하지 않고 직접 개발하게 된 이유는 렌더링 이슈 때문이었습니다. react-dropzone은 dropzone으로 지정된 요소뿐만 아니라 해당 요소의 모든 자식 컴포넌트에 dragEnter 동작 시 re-rendering 되는 문제를 가지고 있었습니다.

위 영상처럼 dropzone으로 지정된 요소의 자식 컴포넌트에서 dragEnter 시 re-rendering이 발생하는 문제가 있었습니다.
이 시기에 저는 렌더링 최적화에 대해 많은 고민을 하고 있었고, 스토리지 서비스를 개발하면서 네이버 MyBox를 참고했는데, MyBox의 렌더링이 매우 효율적으로 동작하는 것을 보고 최대한 비슷하게 구현하고자 직접 dropzone을 개발하게 되었습니다.
💻 Dropzone 코드 ```typescript import { DragEvent, useRef, useState } from "react"; import { fromEvent } from "file-selector"; type DragEventType = DragEvent; const isFile = (event: DragEventType) => { const items = event.dataTransfer.items; const isFile = Array.from(items).some((item) => item.kind === "file"); return isFile; }; interface UseDropzoneProps { dragEnter?: (event: DragEventType) => void; dragLeave?: (event: DragEventType) => void; dropEvent?: (dropFiles: File[], event: DragEventType) => void; } const useDropzone = ({ dragEnter, dragLeave, dropEvent }: UseDropzoneProps) => { const dragCounter = useRef(0); const [isDragActive, setIsDragActive] = useState(false); const onDragEnter = (event: DragEventType) => { if (!isFile(event)) return; dragCounter.current++; if (dragCounter.current === 1) { setIsDragActive(true); dragEnter && dragEnter(event); } }; const onDragLeave = (event: DragEventType) => { if (!isFile(event)) return; dragCounter.current--; if (dragCounter.current === 0) { setIsDragActive(false); dragLeave && dragLeave(event); } }; const onDrop = async (event: DragEventType) => { if (!isFile(event)) return; const files = (await fromEvent(event)) as File[]; dragCounter.current--; setIsDragActive(false); dropEvent && dropEvent(files, event); }; const rootDropzone = { onDrop, onDragEnter, onDragLeave, }; return { isDragActive, rootDropzone }; }; export default useDropzone; ``` ```tsx function FileDropzone() { const { rootDropzone, isDragActive } = useDropzone({}); return (

{file.map((v, index) => { return (

<div>{v.size}</div> <div>{v.updateAt}</div> </div> ); })} </div> ); } ``` 코드의 형식과 사용법은 react-dropzone 라이브러리를 참고하여 만들었습니다. <img src={"/images/drag-event.png"} className="my-4" /> drag 이벤트를 확인해보니 최초로 drag enter 이벤트가 발생한 후, 자식 요소에 enter되었을 때 새로운 enter 이벤트가 동작되고 이전 enter 이벤트에 대한 leave 이벤트가 동작하는 것을 알 수 있었습니다. <br /> 또한, enter 이벤트가 발생했다면 반드시 leave 이벤트 또는 drop 이벤트로 종료된다는 점도 확인했습니다. <br /> 이러한 점을 고려하여 최초의 dragEnter, 마지막 dragLeave 혹은 Drop을 통해 isDragActive state의 값을 변경해주기 위해 countRef를 사용했습니다. <br /> dragEnter에서는 countRef++, leave와 drop에서는 countRef--를 통해 countRef가 1일 때는 최초의 dragEnter로, 0일 때는 마지막 leave 이벤트로 간주하여 동작하도록 csutrom hook을 개발했습니다.