React react-cookie

쿠키의 개념이 사라졌다? 여기를 다시 가보도록 하자!!

react-cookie

react에서 보다 편리하게 cookie를 사용하기 위해 개발된 것같다.

 

react-cookie 시작하기

TERMINAL

npm install react-cookie

 

CDN

<script
  crossorigin
  src="https://unpkg.com/react@16/umd/react.production.js"
></script>
<script
  crossorigin
  src="https://unpkg.com/universal-cookie@3/umd/universalCookie.min.js"
></script>
<script
  crossorigin
  src="https://unpkg.com/react-cookie@3/umd/reactCookie.min.js"
></script>

 

<CookiesProvider />

pages폴더 안에 _app.js(_app.tsx)에 CookiesProvider로 전체 컴포넌트를 감싸 쿠키를 사용하는 것을 알려줍니다.

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

export default function Root() {
  return (
    <CookiesProvider>
      <App />
    </CookiesProvider>
  );
}

 

userCookies([dependencies])

React Hooks을 사용해서 cookies를 access합니다. 

React Hooks는 React 16.8부터 사용할 수 있습니다.

import React from 'react';
import { useCookies } from 'react-cookie';

import NameForm from './NameForm';

function App() {
  const [cookies, setCookie] = useCookies(['name']);

  function onChange(newName) {
    setCookie('name', newName, { path: '/' });
  }

  return (
    <div>
      <NameForm name={cookies.name} onChange={onChange} />
      {cookies.name && <h1>Hello {cookies.name}!</h1>}
    </div>
  );
}

export default App;

 

dependencies

구성 요소가 의존하거나 리렌더링을 트리거해야 하는 쿠키 이름 목록을 선택적으로 지정할 수 있습니다.

지정하지 않으면 쿠키가 변경될 때마다 렌더링됩니다.

 

cookies

모든 쿠키가 포함된 Javascript 개체, 키는 쿠키 이름입니다.

 

setCookie(name, value, [options])

쿠키 값 설정

• name(stirng) : 쿠키 이름
• value(string | object) : 값을 저장하고 필요한 경우 객체를 문자열화합니다.
• options(object) : RFC 6265의 모든 쿠키 옵션 지원
  
  • path(string) : 쿠키 경로, / 모든 페이지에서 쿠키에 액세스할 수 있도록 하려면 경로로 사용
  • expires(Date) : 쿠키의 절대 만료 날짜
  • maxAge(number) : 클라이언트가 쿠키를 수신한 시점부터 쿠키의 상대적인 최대 수명(초)
  • doamin(string) : 쿠키의 도메인(sub.domain.com 또는 .allsubdomains.com)
  • secure(boolean) : HTTPS를 통해서만 액세스할 수 있습니까?
  • httpOnly(booelan): 서버만 쿠키에 접근할 수 있나요?
    참고: 브라우저에서 httpOnly 쿠키를 가져오거나 설정할 수 없으며 서버에서만 가능합니다.
  • sameSite (boolean | none | lax | strice) : Strict 또는 Lax 적용    

 

removeCookie(name, [options])

쿠키 제거

• name(string) : 쿠키 이름
• options(object) : RFC 6265의 모든 쿠키 옵션 지원
  
  • path | (string) : 쿠키 경로, / 모든 페이지에서 쿠키에 액세스할 수 있도록 하려면 경로로 사용
  • expires (Date) : 쿠키의 절대 만료 날짜
  • maxAge(number) : 클라이언트가 쿠키를 수신한 시점부터 쿠키의 상대적인 최대 수명(초)
  • domain(string) : 쿠키의 도메인(sub.domain.com 또는 .allsubdomains.com)
  • secure(boolean) : HTTPS를 통해서만 액세스할 수 있습니까?
  • httpsOnly(boolean) : 서버만 쿠키에 접근할 수 있나요?
    참고로 브라우저에서 httpsOnly 쿠키를 가져오거나 설정할 수 없으며 서버에서만 가능합니다.
    
  • sameSite (boolean | none | lax | strice) : Strict 또는 Lax 적용 

 

withCookies(Component)

어디서나 쿠키에 액세스할 수 있습니다.

• cookies : 쿠키를 가져오고, 설정하고, 제거할 수 있는 쿠키 인스턴스입니다.
• allCookies : 개체의 모든 현재 쿠키입니다.

원래 정적 속성은 반환된 구성 요소에서 호이스트됩니다. WrappedComponent 정적 속성을 사용하여

원래 구성 요소에 액세스할 수도 있습니다.

function MyComponent() {
  return null;
}
const NewComponent = withCookies(MyComponent);
NewComponent.WrappedComponent === MyComponent;

 

Cookies

get(name, [options])

쿠키 값 가져오기

• name (string) : 쿠키 이름
• options (object) :
  
  •  doNotParse (boolean) : 어떤 일이 있어도 쿠키를 객체로 변환하지 않습니다.

getAll([options])

모든 쿠키 가져오기

• options (object) :
  • doNotParse (boolean) : 어떤 일이 있어도 쿠키를 객체로 변환하지 않습니다.

set(name, value, [options])
쿠키 값 설정

• name (string) : 쿠키 이름
• value (string | object) : 값을 저장하고 필요한 경우 객체를 문자열화합니다.
• options (object) : RFC 6265의 모든 쿠키 옵션 지원
  
  • path (string) : 쿠키 경로, / 모든 경로 페이지에서 쿠키에 액세스할 수 있도록 하려면 경로로 사용
  • expires (Date) : 쿠키의 절대 만료 날짜
  • maxAge (number) : 클라이언트가 쿠키를 수신한 시점부터 쿠키의 상대적인 최대 수명(초)
  • domain (string) : 쿠키의 도메인(sub.domain.com 또는 .allsubdomains.com)
  • secure (boolean) : HTTPS를 통해서만 액세스할 수 있습니까?
  • httpOnly (boolean) : 서버만 쿠키에 접근할 수 있나요?
    참고로 브라우저에서 httpOnly 쿠키를 가져오거나 설정할 수 없으며 서버에서만 가능합니다.
  • sameSite (boolean | none | lax | strict) : Strict 또는 Lax 적용 remove(name, [options])

remove(name, [options])

쿠키 제거

• name (string) : 쿠키 이름
• options (object) : RFC 6265의 모든 쿠키 옵션 지원
  • path (string) : 쿠키 경로, / 모든 페이지에서 쿠키에 액세스할 수 있도록 하려면 경로로 사용
  • expires (Date) : 쿠키의 절대 만료 날짜
  • maxAge (number) : 클라이언트가 쿠키를 수신한 시점부터 쿠키의 상대적인 최대 수명(초)
  • domain (string) : 쿠키의 도메인 (sub.domain.com 또는 .allsubdomains.com)
  • secure (boolean) : HTTPS를 통해서만 액세스할 수 있습니까?
  • httpOnly (boolean) : 서버만 쿠키에 접근할 수 있나요?
    참고로 브라우저에서 httpOnly 쿠리를 가져오거나 설정할 수 없으며 서버에서만 가능합니다.
  • sameSite ( boolean | none | lax | strict) : Strice 또는 Lax 적용

 

 

참고 : https://www.npmjs.com/package/react-cookie

•