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

프로젝트 전체 링크

 

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

현재 - (6) option을 toggle button으로 변경하기

다음 - (7) Local Storage로 현재 version 기억하기

 

깃허브에서 코드 확인하기

---

아래의 option도 나쁘지는 않지만, "선택하세요"를 누르기 전까지 어떤 option들이 있는지 알 수 없다.

그리고 option을 매번 바꿀 때마다 다시 선택하세요를 눌러야한다.

 

따라서 아래의 toggle 버튼으로 이루어진 component를 만들어보자.

 

MyToggles.js를 만든다.

init 까지는 MyOptions와 동일하다.

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

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

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

  useEffect(init, []);

  return (
    <div>
    </div>
  );
};

export default MyToggles;

MyToggles.scss는 최종 코드에서 참고하자. 해당 scss는 React-Bootstrap의 Button을 참고해서 만든 디자인이다.

 

App.js에는 현재 선택할 version을 기억해 둘 변수를 useState로 선언하고, MyToggles에 넘겨준다.

//App.js

...

const App = () => {
  const [csvObject, setCsvObject] = useState(csvObjectDefault);
  const [version, setVersion] = useState("");

  return (
    <div>
      <MyToggles
        version={version}
        setVersion={setVersion}
      />
      
      ...

 

MyToggles에도 props를 넘겨받도록 아래와 같이 수정한다.

const MyToggles = ({version, setVersion}) => {

 

이제 node에서 versionList를 set하였으면, 버튼을 만들어주면 된다.

 

App.js에서 넘겨받은 setVersion을 이용하여, 버튼을 클릭할 경우, 현재 target의 innerText로 version을 변경한다.

현재 versionList 중 선택된 version과 같은 경우에는 class를 btn-child selected가 적용되고,

그렇지 않은 경우는 btn-child만 적용된다.

const onClickToggles = (value, setState) => {
  setState(value);
};

const makeVersion = () => {
  if(versionList.length === 0) return;
  
  return versionList.map((ver, idx) => (
    <div
      key={idx}
      className={ver === version? "btn-child selected" : "btn-child"}
      onClick={(e) => onClickToggles(e.target.innerText, setVersion)}
    >
      {ver}
    </div>
  ));
}

 

아래와 같이 마우스를 가져다 대면 글씨가 굵어지고, 클릭을 하면 version이 선택된다.

 

최종 코드는 아래와 같다.

 

React

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

const MyToggles = ({version, setVersion}) => {
  const [versionList, setVersionList] = useState([]);

  const onClickToggles = (value, setState) => {
    setState(value);
  };

  const makeVersion = () => {
    if(versionList.length === 0) return;
    
    return versionList.map((ver, idx) => (
      <div
        key={idx}
        className={ver === version? "btn-child selected" : "btn-child"}
        onClick={(e) => onClickToggles(e.target.innerText, setVersion)}
      >
        {ver}
      </div>
    ));
  }

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

  useEffect(init, []);

  return (
    <div>
      <div className="btn-set">{makeVersion()}</div>
    </div>
  );
};

export default MyToggles;

 

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

import FileUpload from "./components/FileUpload";
import MyTable from "./components/MyTable";
import MyToggles from "./components/MyToggles";
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);
  const [version, setVersion] = useState("");

  return (
    <div>
      <MyToggles
        version={version}
        setVersion={setVersion}
      />
      <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;

 

//MyToggles.scss

@mixin btn-style($color) {
    border-color: $color;;
    background-color: $color;
}

.btn-set {
    margin-top: 3px;
    .btn-child {
      margin-left: 1px;
      cursor: pointer;
      display: inline-block;
      font-weight: 400;
      color: #6c757d;
      text-align: center;
      vertical-align: middle;
      -webkit-user-select: none;
      -ms-user-select: none;
      user-select: none;
      background-color: transparent;
      border: 1px solid transparent;
      padding: .375rem .75rem;
      font-size: 1rem;
      line-height: 1.5;
      border-radius: .25rem;
      transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
      border-color: #6c757d;
      
      &:hover {
        font-weight: bolder;
        border-color: black;
      }
    }
  
    .selected {
      color: #fff;
      @include btn-style(rgb(255, 65, 97));
    }
  }

---

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

다음 - (7) Local Storage로 현재 version 기억하기