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

프로젝트 전체 링크

 

이전 - (6) option을 toggle button으로 변경하기

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

다음 - (8) 각 version별 country 폴더 불러오기

 

깃허브에서 코드 확인하기

---

현재 version을 선택하고, refresh하면 아래와 같이 선택이 해제된다.

 

따라서, Local Storage를 이용하여 현재 선택한 version을 refresh를 하여도 유지되도록 하자.

 

localStorage에 set을 하려면 setItem 메서드를 이용해 값을 저장하면 된다.

localStorage.setItem(KEY, value);

 

값을 불러오고 싶다면 getItem에 key를 넣으면, 해당하는 key에 대한 값을 얻는다.

값이 없다면 null을 return 한다.

let value = localStorage.getItem(key);

 

MyToggles 안에 아래의 LOCAL_STORAGE를 선언하자.

나중에 국가 toggle button도 local storage에 저장할 예정이기 때문에 아래와 같이 object로 만들었다.

해당하는 key에 setState를 mapping 한다.

const LOCAL_STORAGE = {
  LS_VERSION: setVersion,
};

 

onClickToggles에는 key 값을 넘겨 받아서 setItem을 설정하도록 한다.

  const onClickToggles = (value, setState, lsKey) => {
    setState(value);
    if(lsKey) localStorage.setItem(lsKey, value);
  };

 

makeVersion에서 onClickToggles에 key로 LS_VERSION을 넘긴다.

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

 

이제 init에서 아래의 코드를 추가한다.

LOCAL_STORAGE에 담겨있는 모든 key를 순회하면서 key 값이 있는 경우, onClickToggles를 실행시킨다.

즉, key값이 있는 경우 저장된 version에 click을 하는 효과를 볼 수 있다.

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

  for (let key in LOCAL_STORAGE) {
    let data = localStorage.getItem(key);
    if (data !== null) onClickToggles(data, LOCAL_STORAGE[key], key);
  }
};

 

이제 refresh를 해도 version이 계속해서 선택되어있는 것을 알 수 있다.

 

마지막으로, localStorage의 clear 메서드를 이용하면 저장된 localStorage가 모두 초기화된다.

필요할 때 마다 코드에 초기화하는 코드를 추가하여 test 해보자.

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

  return;
}

 

최종 코드는 아래와 같다.

 

React

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

const MyToggles = ({ version, setVersion }) => {
  const LOCAL_STORAGE = {
    LS_VERSION: setVersion,
  };

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

  const onClickToggles = (value, setState, lsKey) => {
    setState(value);
    if(lsKey) localStorage.setItem(lsKey, 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, 'LS_VERSION')}
      >
        {ver}
      </div>
    ));
  };

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

    for (let key in LOCAL_STORAGE) {
      let data = localStorage.getItem(key);
      if (data !== null) onClickToggles(data, LOCAL_STORAGE[key], key);
    }
  };

  useEffect(init, []);

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

export default MyToggles;

---

이전 - (6) option을 toggle button으로 변경하기

다음 - (8) 각 version별 country 폴더 불러오기