세션 Session

🫧 react-session-api 라이브러리

1. 라이브러리 설치 npm install react-session-api

2. 라이브러리 import

3. set(키, 값)과 get(키) 함수 사용

import Session from 'react-session-api';

function App() {
	
  function save() {
    // 1. 숫자
    let c = 1024;
    Session.set("count", c);

    // 2. 객체
    let member = {"id":"abc", "pw":"123"};
    Session.set("member", member);
  }
  
  function load() {
    // 1
    let c = Session.get("count");
    alert(c);

    // 2
    let member = Session.get("member");
    alert(JSON.stringify(member));
  }

  return (
    <div>
      <h1>Session test</h1>
      <button type='button' onClick={save}>저장</button>
      <button type='button' onClick={load}>읽기</button>
    </div>
  );
}
export default App;

 

🎈 sessionStorage (or localStorage) 클래스

1. 내장 클래스의 setItem(키, 값)과 getItem(키) 함수 사용

2. 객체의 경우 세션에 문자열로 변환하여 저장하고, 읽은 후에는 JSON parsing 필요
   (객체 그대로 저장 시 [object Object]로 저장됨)

function save() {
  let member = {"id":"abc", "pw":"123"};
  sessionStorage.setItem("member", JSON.stringify(member));
}

function load() {
  let member = sessionStorage.getItem("member");
  alert(JSON.parse(member));
}

 

---

쿠키 Cookie

🍪 react-cookie 라이브러리

1. 라이브러리 설치 npm install react-cookie

2. 라이브러리 import

3. useCookies(["쿠키 이름"]) 훅 사용

   • setCookie("쿠키 이름", 쿠키에 넣을 값, 옵션)
   • removeCookies("쿠키 이름", 옵션)
   • cookies.쿠키이름

import { useCookies } from 'react-cookie';

function App() {
  const [id, setId] = useState("");

  // 기존 쿠키 저장
  const [cookies, setCookies, removeCookies] = useCookies(["id"]);
  
  // 상태 변경
  const changeId = (e) => setId(e.target.value);
  
  // 변경된 상태 쿠키에 저장
  const cookieSave = (e) => {
    if(e.target.check){
      setCookies("id", id, {path:'/'});
    } else {	// 체크 해제 시 쿠키 삭제
      removeCookies('id');
    }
  }
  
  // 쿠키 꺼내기
  const cookieLoad = () => alert(cookies.id);
  
  return (
    <div>
      <h1>Cookie test</h1>
      <input value={id} onChange={changeId} /><br/>
	  <input type="checkbox" onChange={cookieSave} /> 쿠키 저장<br/>
      <button onClick={cookieLoad}>쿠키 불러오기</button>
    </div>
  );
}

export default App;