Chapter05. 리엑트 쿠키 ( Cookie ) / useCookies 훅

<< 학습 목표 >>

1. 쿠키를 생성해 데이터를 저장할 수 있다.

2. 쿠키에 저장된 데이터를 꺼낼 수 있다.

3. 서버가 보낸 쿠키 데이터를 꺼낼 수 있다.

---

이번 Chapter 를 시작 하기 전 프로젝트 -> src 에 chapter05 폴더를 추가하자

 

리엑트에서 쿠키를 사용하려면 프로젝트에 쿠키 라이브러리를 설치해야함

터미널에서 프로젝트 경로로 이동 후 쿠키 라이브러리를 설치하자

(1). 프로젝트 경로로 이동

(2). 쿠키 라이브러리 설치 명령

---

우선 리엑트에서 쿠키를 생성하고 꺼내 보고 그 다음 서버에서 보낸 쿠키를 꺼내보자

 

<< 리엑트에서 쿠키 생성 >>

리엑트에서 쿠키를 사용하기 위해서는 다음의 import 문을 추가해야함

  import { useCookies } from 'react-cookie';

 

쿠키를 사용할 는 다음의 코드를 사용함

  const [cookies, setcookies] = useCookies([]);

 

쿠키를 생성할 때는 setter 를 사용해 쿠키를 생성함

  setcookies("쿠키명", "값");

 

이제 실습을 해보자

프로젝트 -> src -> chapter05 -> Component07.jsx 파일을 추가하고 아래 코드를 추가하자

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

function Component07() {
    const [name, setName] = useState();
    const [value, setValue] = useState();
    const [cookies, setCookies] = useCookies();

    function saveAtCookie() {
        setCookies(name, value);
    }

    return(
        <div style={{"margin": "50px"}}>
            <div style={{"margin": "20px"}}>
                <label htmlFor="name">쿠키 명 :&nbsp;&nbsp;</label>
                <input type="text" id="name" onChange={(e) => setName(e.target.value)}  />
            </div>

            <div style={{"margin": "20px"}}>
                <label htmlFor="value">쿠키에 저장할 데이터 :&nbsp;&nbsp;</label>
                <input type="text" onChange={(e) => setValue(e.target.value)} />
            </div>

            <div style={{"margin": "20px"}}>
                <button type="button" onClick={saveAtCookie}>쿠키에 저장</button>
            </div>
        </div>
    );
}

export default Component07;

<< 코드 설명 >>

 

(1). 쿠키를 사용하기 위한 import

(2). 쿠키를 사용하기 위해 useCookies 훅을 사용함

  지금은 쿠키를 생성하는 방법을 배우고 있기 때문에 setter만 사용함

(3). 이름이 name인 쿠키에 value를 저장함

 

이제 리엑트 프로젝트를 실행시키고 이 컴포넌트를 웹 페이지에 출력하자

쿠키 명과 저장할 데이터를 임의로 입력 후 [ 쿠키에 저장 ] 버튼을 눌러보자

화면에 보이는 변화는 없지만 내가 지정한 이름의 쿠키에 값이 저장되 있음

 

쿠키를 확인하기 위해서는 브라우저의 개발자 도구를 사용해야함

개발자 도구는 브라우저 내에서 [ F12 키 ] 를 누르거나 아래 순서를 따라가면 됨

 

개발자 도구 내에서는 엣지와 크롬 브라우저 모두 동일하므로 아래 설명을 따라가자

개발자 도구 내에서 쿠키를 확인하려면 [ 응용 프로그램 ] 또는 [ 애플리케이션 ] 또는 [ Application ] 탭으로 이동(1) -> [ 쿠키 ] (2) -> 쿠키 목록(3) 확인

 

지금 우리가 생성한 쿠키는 만료 시간이 없기 때문에 브라우저를 닫으면 사라지는 쿠키임

일정 기간 동안 쿠키를 유지하고 싶다면 다음과 같이 만료 시간을 지정해줘야함

만료 시간은 setter 의 세번째 인자로 넣어주며 "maxAge" 속성의 값으로 초단위의 만료 시간을 지정함

3600은 1시간을 초로 변환한 것

  - 1분 = 60초

  - 1시간 = 60분

  - 1시간은 1분이 60개 있는거니 60(1분의 초) * 60 => 3600

---

<< 쿠키에 저장된 값 가져오기 >>

 

이번에는 위에서 생성한 쿠키의 값을 가져오자

프로젝트 -> src -> chapter04 -> Component08.jsx 를 추가하고 아래 코드를 추가하자

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

function Component08() {
    const [name, setName] = useState();
    const [value, setValue] = useState();
    const [cookies, setCookies] = useCookies();

    function getAtCookie() {
        if(name in cookies) {
            setValue(cookies[name]);
        } else {
            setValue("쿠키 명이 잘못되었습니다.");
        }
    }

    return(
        <div style={{"margin": "50px"}}>
            <div style={{"margin": "20px"}}>
                <label htmlFor="name">쿠키 명 :&nbsp;&nbsp;</label>
                <input type="text" id="name" onChange={(e) => setName(e.target.value)}  />
            </div>

            <div style={{"margin": "20px"}}>
                <p>쿠키에 저장한 데이터 : {value}</p>
            </div>

            <div style={{"margin": "20px"}}>
                <button type="button" onClick={getAtCookie}>가져오기</button>
            </div>
        </div>
    );
}

export default Component08;

<< 코드 설명 >>

(1). 쿠키를 사용하기 때문에 useCookies 훅 사용

(2). [ 가져오기 ] 버튼 클릭 시 (3)의 함수 호출

(3). 화면에 입력한 쿠키 명이 쿠키 목록 안에 있는지 확인 후 있다면 해당 쿠키의 값을 value 변수에 저장함

  화면에 입력한 쿠키 명이 쿠키 목록 안에 없다면 value 변수에 "쿠키 명이 잘못되었습니다." 를 저장함

---

<< 컴포넌트가 마운트 되며 쿠키의 값 가져오기 >>

 

이 부분을 배우기 전 Component07 컴포넌트를 페이지에 출력하고 이름이 name1인 쿠키에 data1 을 저장하자

 

위에서는 컴포넌트가 마운트 된 후 쿠키의 값을 가져와봤음

여기서는 컴포넌트를 마운트 하면서 쿠키의 값을 가져와보자

 

프로젝트 -> src -> chapter05 -> Component09.jsx 파일을 추가 후 아래 코드를 추가하자

import React, {useState, useEffect} from 'react';
import { useCookies } from 'react-cookie';

function Component09() {
    const [value, setValue] = useState();
    const [cookies, setCookies] = useCookies(["name1"]);

    useEffect(() => {
        setValue(cookies["name1"]);
    }, []);

    return(
        <div style={{"margin": "50px"}}>
            <div style={{"margin": "20px"}}>
                <p>name1 쿠키에 저장한 데이터 : {value}</p>
            </div>
        </div>
    );
}

export default Component09;

<< 코드 설명 >>

 

(1). 지금까지 우리는 useCookies 훅을 사용할 때 인자로 아무것도 넣지 않았음

  useCookies 훅을 사용할 때 인자를 아무것도 넣지 않으면 모든 쿠키들을 불러와 cookies 변수에 저장함

  useCookies 훅을 사용할 때 문자열 배열을 인자로 넣으면 해당하는 이름의 쿠키들만 불러와 cookies 변수에 저장함

(2). useEffect 훅을 사용해 컴포넌트가 마운트될 때 불러온 name1 쿠키의 값을 value 변수에 저장함

 

여기서 이제 useCookies 훅을 사용할 때 두 가지 방법이 있다는걸 알았음

바로 위 코드 설명에서 언급한것처럼 useCookies 훅에 인자를 넣지 않으면 모든 쿠키들을 불러와 cookies 변수에 저장함

useCookies 훅에 인자를 넣으면 해당 하는 쿠키들만 불러와 cookies 변수에 저장함

 

사이트 내 쿠키가 너무 많거나 잘못된 쿠키에 접근하면 안된다 라면 useCookies 훅에 인자로 문자열 배열을 넣어서 필요한 쿠키만 불러와서 사용하면 됨

사이트 내 모든 쿠키를 불러와 찾아봐야한다면 useCookies 훅에 인자를 넣지 않으면 됨

 

 

이라고 다른 블로그나 ChatGPT가 그렇게 설명을 해주는데 인자를 넣어도 모든 쿠키를 불러와 저장하고 있음

 

위와 같이 Component09 에 console.log 를 사용해 불러온 쿠키를 출력해보면 모든 쿠키가 출력되는걸 알 수 있음

만약 생성한 쿠키가 없다면 Component07 컴포넌트를 추가하고 쿠키를 몇 개 추가하고 Component09 컴포넌트에서 확인해보자

쿠키의 값을 불러오는 부분을 배우고 있으므로 "왜 여러번 출력되지?" 보다 출력된 쿠키를 주목하자

우리는 분명 인자에 ["name1"] 을 넣어 이름이 name1인 쿠키만 불러왔는데 cookies 변수 안에는 모든 쿠키가 저장됬음

 

쿠키가 더 많아져야 하는건지, 어떤 변경 사항 때문인지는 잘 모르겠으나 인자를 넣어도 모든 쿠키를 불러오고 있음

 

그래도 특정 쿠키가 필요할 때는 문자열 배열을 인자로 넣자

---

<< 서버가 보낸 쿠키 확인하기 >>

 

-- 이번 내용을 배우기 전 서버에서 준비해야될 사항 --

---

노드 서버의 컨트롤러에 아래 코드 추가

const express = require('express');
const cors = require('cors');
const app = express();
const port = 3001;

app.use(cors());

app.get('/cookie/save', (req, res) => {
    res.cookie("someCookie", "someData");
    res.end();
});

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`);
});

<< 코드 설명 >>

(1). somCookie 라는 이름의 쿠키에 "someData" 데이터를 저장해 클라이언트에게 보냄

---

 

지금까지 쿠키를 생성할 때 리엑트(클라이언트)에서 직접 쿠키를 생성했는데 서버가 쿠키를 생성해 전달하고 리엑트에서는 서버가 전달한 쿠키를 꺼내야하는 경우도 생김

이번에는 쿠키를 생성해 전달하는 서버로 요청을 보내고 응답을 받았을 때 서버가 보낸 쿠키를 꺼내보자

 

프로젝트 -> src -> chapter05 -> Component10.jsx 파일을 추가하고 아래 코드를 추가하자

import React, {useState} from 'react';
import { useCookies } from 'react-cookie';
import axios from 'axios';

function Component10() {
    const [value, setValue] = useState();
    const [cookies, setCookies] = useCookies();

    const success = (response) => {
        setValue(cookies["someCookie"]);
    }

    const error = () => {
        console.log("문제가 발생했습니다.");
    }

    const sendRequest = () => {
        axios.get("http://localhost:3001/cookie/save", { withCredentials: true }).then(success).catch(error);
    }

    return(
        <div style={{"margin": "50px"}}>
            <div>
                <button type="button" onClick={sendRequest}>서버로 요청 보내기</button>
            </div>

            {
                value != null && (
                    <div style={{"margin": "20px"}}>
                        <p>서버가 이름이 someCookie인 쿠키에 저장한 데이터 : {value}</p>
                    </div>
                )
            }
        </div>
    );
}

export default Component10;

<< 코드 설명 >>

(1). axios 로 요청을 보낸 후 서버가 보낸 쿠키를 받으려면 반드시 withCredentials 옵션을 true 로 설정해 요청을 보내야함

  이 옵션이 빠지면 서버는 쿠키를 보내지만 클라이언트에서 쿠키를 저장하지 않음