react - cookie 사용

개요

쿠키는 웹사이트 방문 기록 정보 파일로 로그인, 광고, 사용자 판단 ...에서 중요한 요소입니다.

이러한 쿠키를 react에서 사용하는 방법을 알아보는 시간을 가지겠습니다.

​

react cookie

프로젝트에서 쿠키를 활용하기 위한 라이브러리를 설치합니다.

npm i react-cookie

프로젝트 최상단에 CookiesProvider를 사용합니다.

import React from 'react';
import App from './App';
import { CookiesProvider } from 'react-cookie';
 
export default function Root() {
  return (
    <CookiesProvider>
      <App />
    </CookiesProvider>
  );
}


// App.jsx
import React, { Component } from 'react';
import { instanceOf } from 'prop-types';
import { withCookies, Cookies } from 'react-cookie';
 
import NameForm from './NameForm';
 
class App extends Component {
  static propTypes = {
    cookies: instanceOf(Cookies).isRequired
  };
 
  constructor(props) {
    super(props);
 
    const { cookies } = props;
    this.state = {
    //쿠키를 가져옵니다.
      name: cookies.get('name') || 'Ben'
    };
  }
 
  handleNameChange(name) {
    const { cookies } = this.props;
    
    //쿠키를 저장합니다.
    cookies.set('name', name, { path: '/' });
    this.setState({ name });
  }
 
  render() {
    const { name } = this.state;
 
    return (
      <div>
        <NameForm name={name} onChange={this.handleNameChange.bind(this)} />
        {this.state.name && <h1>Hello {this.state.name}!</h1>}
      </div>
    );
  }
}
 
export default withCookies(App);

 

참고자료

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