반응형 리액트194 React Handsontable로 csv 편집기 만들기 (9) 프로젝트 전체 링크 이전 - (8) handontable 설치하기 현재 - (9) useEffect를 이용하여 handsontable 연동하기 다음 - (10) handsontable basic options 깃허브에서 코드 확인하기 이제 csv 파일을 불러오거나 drop할 경우, handsontable에 csv 파일이 나타나도록 해보자. App.js에서 MyTable에 csvFile로 csvObject를 넘긴다. MyTable에서 data와 HotTable을 지우고 handsontable을 import 한다. MyTable에서는 csvFile을 props로 받는다. import "handsontable/dist/handsontable.full.css"; import Handsontable from "h.. 2021. 6. 5. React Handsontable로 csv 편집기 만들기 (7) 프로젝트 전체 링크 이전 - (6) csv 파일 파싱하기 현재 - (7) App.js에서 파싱된 csv 파일 받기 다음 - (8) handsontable 설치하기 깃허브에서 코드 확인하기 이전 글에서 FileUpload에서 csv를 parsing하였다. csv를 parsing한 내용은 App.js에서 보여주려고 한다. parsing한 내용과 csv의 height와 width를 App.js에서 가지고 올 수 있도록 App.js를 아래와 같이 수정하자. // App.js import React, { useState } from "react"; //import * as lib from "./components/library"; import FileUpload from "./components/FileUploa.. 2021. 6. 3. React Handsontable로 csv 편집기 만들기 (5) 프로젝트 전체 링크 이전 - (4) Drop한 파일 읽기 현재 - (5) 선택한 경로의 파일 읽기 다음 - (6) csv 파일 파싱하기 깃허브에서 코드 확인하기 파일 선택을 누르고, 열기를 누르면 onChange가 이것을 감지할 수 있다. log가 나오는 것이 보인다. 다시 library.js에 handleUpload 함수를 만들고 event 객체에 대한 log를 찍어보자. // library.js ... export const handleUpload = (e) => { console.log(e); } // FileUpload.js ... lib.handleUpload(e)}/> 결과를 확인하면, Drag & Drop과 비슷한 객체를 확인할 수 있다. handleOnDrop에서는 e.dataTransfe.. 2021. 6. 1. React Handsontable로 csv 편집기 만들기 (4) 프로젝트 전체 링크 이전 - (3) 선택한 경로의 파일 불러오기 현재 - (4) Drop한 파일 읽기 다음 - (5) 선택한 경로의 파일 읽기 깃허브에서 코드 확인하기 이제 drop한 file을 읽어서 console에 출력해보자. library.js에서 불필요한 로그는 지운다. 그리고 handleOnDrop에서 매개 변수 e (event 객체)가 무엇인지 출력해보자. // library.js ... export const handleOnDrop = (e, setState) => { e.preventDefault(); console.log(e); setState(false); return false; }; file을 drop하면 event 객체가 출력된다. event 객체를 펼여보면 여러 값들이 있다. 여.. 2021. 5. 31. React Handsontable로 csv 편집기 만들기 (3) 프로젝트 전체 링크 이전 - (2) Drag & Drop 현재 - (3) 선택한 경로의 파일 불러오기 다음 - (4) Drop한 파일 읽기 깃허브에서 코드 확인하기 (2) Drag & Drop Test가 완료되었으므로 FileUpload component를 만들자. DragDropTest.js / scss를 보고 FileUpload.js / scss에 그대로 복사한다. (그리고 이름을 변경한다.) FileUpload에서는 Drag & Drop 외에도 선택한 경로의 파일을 불러올 수 있도록 을 추가하자. input type에 file을 지정하면 아래와 같은 파일 선택 버튼이 생긴다. accept 속성 지정한 속성의 파일만 불러올 수 있다. ".csv, .txt"로 지정하면 csv와 txt 파일만 불러온다... 2021. 5. 30. 이전 1 ··· 19 20 21 22 다음 반응형
