Node js, React 파일 관리 시스템 만들기 (5)

프로젝트 전체 링크

 

이전 - (4) 원하는 확장자의 파일만 불러오기

현재 - (5) 최상위 폴더 목록으로 option 만들기

다음 - (6) option을 toggle button으로 변경하기

 

깃허브에서 코드 확인하기

---

가장 상위 폴더인 2020 ~ 2022 폴더를 불러와서 아래의 option에 넣어보자.

 

MyOptions.js를 만들고 form안에 option을 만들어둔다.

//MyOptions.js
import React from "react";

const MyOptions = () => {
  return (
    <div>
      <form>
        <span>Version : </span>
        <select>
          <option value="">선택하세요.</option>
          <option value="2020">2020</option>
          <option value="2021">2021</option>
          <option value="2022">2022</option>
        </select>
      </form>
    </div>
  );
};

export default MyOptions;

 

App.js에 MyOptions를 추가한다.

//App.js

import MyOptions from "./components/MyOptions";

const App = () => {
  const [csvObject, setCsvObject] = useState(csvObjectDefault);
  return (
    <div>
      <MyOptions/>
      <button onClick={nodeTest}>서버 연결</button>
	  ...
  );
};

export default App;

 

그러면 아래와 같은 결과를 얻는다.

---

이제 2023 폴더가 추가되었다고 가정해보자.

그러면 Options는 hard coding 되어있으므로, select tag 안에 option을 수동으로 추가해야 한다.

따라서 fetch를 이용해 폴더 목록을 불러와서, option이 설정되도록 만들자.

 

먼저 useState로 versionList를 선언한다.

const [versionList, setVersionList] = useState([]);

 

그리고 useEffect를 이용해 MyOptions가 렌더링 될 때, 최초로 최상위 폴더를 가져오도록 한다.

const init = () => {
  mnode.getVersionList(setVersionList);
};

useEffect(init, []);

 

nodelibrary.js의 getVersionList는 getFileFolderList를 참고해서 다시 만들었다.

최상위 PATH만 넣어주고 json으로 파싱된 data중 folderList만 로그로 찍으면 아래와 같다.

//nodelibrary.js

export const PATH = `C:\\Users\\username\\Downloads\\TESTFILES`;

export const getVersionList = (setState) => {
    fetch(`${MY_SERVER}/getFileFolderList?path=${PATH}`)
    .then((response) => response.json())
    .then((data) => console.log(data.folderList));
}

 

새로고침하면 init할 때마다 folderlist의 2020 ~ 2022 폴더를 가져오는 것을 알 수 있다.

 

로그로 확인하였으니, getVersionList의 console.log를 setState로 변경하자.

여기에서는 setVersionList를 넘겨 받게 된다.

folderList의 name으로 배열을 setState에 넘겨주자. 

    .then((data) => setState(data.folderList.map(list => list.name)));

 

init에서 setVersionList를 넘겼고 렌더링이 완료되면 versionList에 name: 2020 ~ 2022가 저장되어있다.

이제 versionList의 map을 이용해서 option을 만들면 된다.

<select>
    <option value="">선택하세요.</option>
    {versionList.map((item) => getOptionsForVersion(item))}
</select>

 

getOptionsForVersion은 아래와 같다.

const getOptionsForVersion = (item) => {
  return (
    <option key={item} value={item}>
      {item}
    </option>
  );
};

 

getOptionsForVersion은 versionList의 element 하나하나를 이전의 <option> 태그로 리턴해준다.

여기에서는 key도 추가했을 뿐이다.

<option value="2020">2020</option>

---

이제 TESTFILES 폴더에 dummy로 2023을 추가해보자.

 

2023 폴더가 자동으로 추가된 것을 알 수 있다.

 

최종 코드는 아래와 같다.

 

React

//nodelibrary.js

const MY_SERVER = `http://192.168.55.120:3002`;
export const PATH = `C:\\Users\\username\\Downloads\\TESTFILES`;

export const getFileFolderList = (path, fileExtension) => {
    fetch(`${MY_SERVER}/getFileFolderList?path=${path}&fileExtension=${fileExtension}`)
    .then((response) => response.json())
    .then((data) => console.log(data));
}

export const getVersionList = (setState) => {
    fetch(`${MY_SERVER}/getFileFolderList?path=${PATH}`)
    .then((response) => response.json())
    .then((data) => setState(data.folderList.map(list => list.name)));
}

 

//MyOptions.js
import React, { useState, useEffect } from "react";
import * as mnode from "./nodelibrary";

const getOptionsForVersion = (item) => {
  return (
    <option key={item} value={item}>
      {item}
    </option>
  );
};

const MyOptions = () => {
  const [versionList, setVersionList] = useState([]);

  const init = () => {
    mnode.getVersionList(setVersionList);
  };

  useEffect(init, []);

  return (
    <div>
      <form>
        <span>Version : </span>
        <select>
          <option value="">선택하세요.</option>
          {versionList.map((item) => getOptionsForVersion(item))}
        </select>
      </form>
    </div>
  );
};

export default MyOptions;

 

//App.js
import React, { useState } from "react";

import FileUpload from "./components/FileUpload";
import MyOptions from "./components/MyOptions";
import MyTable from "./components/MyTable";
import * as mnode from "./components/nodelibrary";

const csvObjectDefault = {
  HEIGHT: 0,
  WIDTH: 0,
  csv: [],
};

const nodeTest = () => {
  mnode.getFileFolderList(mnode.PATH, "csv");
  return;
}

const App = () => {
  const [csvObject, setCsvObject] = useState(csvObjectDefault);
  return (
    <div>
      <MyOptions/>
      <button onClick={nodeTest}>서버 연결</button>
      <button onClick={() => console.log(csvObject)}>print csv</button>
      <div className="App">
        <FileUpload setCsvObject={setCsvObject} />
        <MyTable csvFile={csvObject}/>
      </div>
    </div>
  );
};

export default App;

---

이전 - (4) 원하는 확장자의 파일만 불러오기

다음 - (6) option을 toggle button으로 변경하기