React cookie

목차

 

쿠키 쓰는 법에 대해 적으려 했다가 개념을 먼저 적었다 후후...

설명하는 방식으로 블로그를 쓰니 이렇게 개념을 짚고 넘어가게 된다.

쿠키와 세션

React cookie

쿠키에 대해 알아보았으니, 쿠키를 쓰는 법에 대해 알아보자!

npm install react-cookie

일단 패키지를 다운받자

import React from 'react';
import ReactDOM from 'react-dom';
import { CookiesProvider } from 'react-cookie';
import App from './App';


ReactDOM.render(
  <CookiesProvider>
    <App />
  </CookiesProvider>,
  document.getElementById('root')
);

패키지를 다운로드한 다음,

CookiesProvider로 전체 컴포넌트를 감싸

쿠키를 사용한다는 것을 명시해주자.

 

저번에 Redux도 그렇고 전체 시스템을 건드릴 땐 Provider를 쓰는 경향이 보인다.

코드

//App.js
import React, { useEffect, useState } from "react";
import { useCookies } from "react-cookie";

function App() {
  const [text,setText] = useState('');
  const [isRemember, setIsRemember] = useState(false);
  const [cookies, setCookie, removeCookie] = useCookies(['rememberText']);

  let now = new Date;
  let after1m = new Date();

  useEffect(() => {
    if(cookies.rememberText !== undefined){
      setText(cookies.rememberText);
      setIsRemember(true);
    }
  },[]);
  
  function onChange(e) {
    setText(e.target.value);
  }

  const handleOnChange = (e) => {
    after1m.setMinutes(now.getMinutes() +1);
    setIsRemember(e.target.checked);
    if(e.target.checked){
      setCookie('rememberText', text, {path:'/', expires:after1m});
    } else {
      removeCookie('rememberText');
    }
  }

  return (
    <>
      <input value={text} onChange={onChange}/>
      <input type="checkBox" onChange={handleOnChange} checked={isRemember}/>
      <h1>{text}</h1>
    </>
  );
}


export default App;

해석

//App.js
import React, { useEffect, useState } from "react";
import { useCookies } from "react-cookie";

function App() {
  return (
    <>
      <input value={text} onChange={onChange}/>
      <input type="checkBox" onChange={handleOnChange} checked={isRemember}/>
      <h1>{text}</h1>
    </>
  );
}


export default App;

일단 text 입력 태그 하나랑 checkBox 하나를 만들었다

또한 text 값을 출력하게 만들었다.

//App.js
import React, { useEffect, useState } from "react";
import { useCookies } from "react-cookie";

function App() {
  const [text,setText] = useState('');
  const [isRemember, setIsRemember] = useState(false);
  const [cookies, setCookie, removeCookie] = useCookies(['rememberText']);

  let now = new Date;
  let after1m = new Date();

  useEffect(() => {
    if(cookies.rememberText !== undefined){
      setText(cookies.rememberText);
      setIsRemember(true);
    }
  },[]);
  
  function onChange(e) {  // text input 값이 변하면 활성되는 함수
    setText(e.target.value);  // text를 입력값으로 재정의
  }

  const handleOnChange = (e) => {  // checkBox 값을 변화 시킬시
    setIsRemember(e.target.checked);  // checkBox가 체크되어있다면 isRemember가 true가 된다.
    if(e.target.checked){  // checkBox를 체크할시
      after1m.setMinutes(now.getMinutes() +1); // after1m를 현재시간의 1분뒤로 정의
      setCookie('rememberText', text, {path:'/', expires:after1m});
      // remeberText에 text라는 값을 넣는다.
      // path는 적용되는 도메인
      // expires = 만료시간은 1분뒤
    } else { // checkBox의 체크를 지울시
      removeCookie('rememberText'); // 쿠키 remeberText를 지운다
    }
  }

  return (
    <>
      <input value={text} onChange={onChange}/>
      <input type="checkBox" onChange={handleOnChange} checked={isRemember}/>
      <h1>{text}</h1>
    </>
  );
}


export default App;

이번 포스팅에서는 바로 useCookies라는 훅을 써버렸는데,

훅을 안 쓰더라도 해당 구성이 Cookies.set / Cookies.get / Cookies.remove로

함수명만 다를 뿐 구성은 같기 때문에 그냥 훅으로 바로 들어갔다.

const [cookies, setCookie, removeCookie] = useCookies(['rememberText']);

훅을 많이 알게 되어 그런가,

구성이 눈에 보이기 시작한다.

 

cookies는 쿠키의 정의,

setCookie는 쿠키를 재정의,

removeCookie는 쿠키 제거이다.

useCookies 안에는 초기값을 넣는다.

결과

 

 

입력란에 텍스트를 적으면

바로 밑에 결과도 같이 뜬다.

 

체크박스를 클릭해주면 쿠키에 저장된다.

새로고침을 하면 쿠키값이 보존되어있다.

만료기간인 1분뒤에 새로고침을 하면

쿠키는 사라져있다.

끝