React Handsontable로 csv 편집기 만들기 (2)

프로젝트 전체 링크

 

이전 - (1) Project Setting

현재 - (2) Drag & Drop

다음 - (3) 선택한 경로의 파일 불러오기

 

깃허브에서 코드 확인하기

---

Drag & Drop의 과정에서 sass를 이용하여 이벤트에 대한 css를 변경할 수 있다. 따라서 sass를 설치한다.

yarn add node-sass

css 작업이 많은 프로젝트는 아니지만 추후 조금이라도 생산성을 높이기 위해 이번 기회에 한 번 써보자.

---

파일을 업로드하기 전에 Drag & Drop을 구현해보자.

자바스크립트에서는 여러 Drag & Drop 이벤트를 지원한다.

 

1) ondrop - drop 이벤트

2) ondragover - drop이 완료된 후

3) ondragleave - drag 영역을 벗어나는 이벤트

 

library.js에 아래와 같이 3개의 함수를 만든다.

preventDefault()와 return false를 이용해서 drag & drop의 기본 동작을 하지 못하도록 한다.

setState에 대해서는 뒤에서 설명한다.

// library.js
export const handleOnDragLeave = (e, setState) => {
  e.preventDefault();
  console.log("leave");
  setState(false);
  return false;
};

export const handleDragOver = (e, setState) => {
  e.preventDefault();
  console.log("over");
  setState(true);
  return false;
};

export const handleOnDrop = (e, setState) => {
  e.preventDefault();
  console.log("drop");
  setState(false);
  return false; 
};

 

drag & drop 이벤트를 확인하기 위해 css 폴더에 DragDropTest.scss를 만든다.

scss에서 &는 부모 연산자로 &.in = #drag-drop-filed.in이 된다. 

이벤트가 없으면 field가 blue가 되도록, 이벤트가 발생하면 red가 되도록 만들 수 있다.

// DragDropTest.scss
#drag-drop-field { 
    border: 3px dashed blue;
    width: 70vw; 
    height: 70vh; 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    p {
      font-size: 30px;
    }
    
    &.in { 
      border: 3px dashed red;  
    }
  }

 

component 폴더에서 DragDropTest.js를 만든다.

그리고 div에 onDrop, onDragOver, onDragLeave에 대해 event를 걸어둔다.

참고로 react에서 이벤트 이름은 카멜 표기법을 이용한다. (ondragstart → onDragStart)

 

useState로 dropFlag를 false로 초기화한다.

onDragOver에서 setDropFlag는 setState(true)가 되기 때문에,

drag한 file이 field로 들어올 경우 className의 dropFlag가 true가 되어 "in"이 추가가 된다. 

앞서 DragDropTest의 scss에 in class는 red가 되도록 설정하였다.

// DragDropTest.js
import React, { useState } from "react";
import * as lib from "./library.js";
import "../css/DragDropTest.scss";

const DragDropTest = () => {
  const [dropFlag, setDropFlag] = useState(false);

  return (
    <div
      id="drag-drop-field"
      className={dropFlag ? "in" : ""}
      onDrop={(e) => lib.handleOnDrop(e, setDropFlag)}
      onDragOver={(e) => lib.handleDragOver(e, setDropFlag)}
      onDragLeave={(e) => lib.handleOnDragLeave(e, setDropFlag)}
    >
      <p>drag & drop</p>
    </div>
  );
};

export default DragDropTest;

 

App.js에 DragDropTest component를 만들어주면 drag & drop test를 할 수 있다.

// App.js
import React from "react";
//import * as lib from "./components/library";
import DragDropTest from "./components/DragDropTest";

const App = () => {
  return (
    <div>
      <div className="App">
        <DragDropTest />
      </div>
    </div>
  );
};

export default App;

---

test 결과는 아래와 같다.

마지막에 file을 놓으면 drop 로그까지 남는 것을 알 수 있다.

(field를 벗어나지 않았는데 leave 로그가 남는 것은 ScreenShot을 찍었기 때문이다.)

 

 

---

이전 - (1) Project Setting 

다음 - (3) 선택한 경로의 파일 불러오기