react jsx 에서 쿠키란 또는 쿠키 설정에 관하여

 

```jsx
const [cookies, setCookie] = useCookies();
```
이 문법은 **React의 `react-cookie` 라이브러리**에서 제공하는 `useCookies` 훅을 사용하여 **쿠키(cookie)를 관리하는 코드**입니다.

## 1. `useCookies()`란?

`useCookies`는 React에서 쿠키를 **읽고, 설정(set), 삭제(remove)** 할 수 있도록 해주는 훅입니다.
### 사용하려면 `react-cookie` 설치 필요
먼저, `react-cookie` 라이브러리가 설치되어 있어야 합니다. 없으면 아래 명령어로 설치하세요.
```sh
npm install react-cookie
```


```jsx 
const [cookies, setCookie] = useCookies();
```

이 코드는 **쿠키 상태(`cookies`)와 쿠키를 설정하는 함수(`setCookie`)를 제공**합니다.
- `cookies`: 현재 저장된 쿠키 객체입니다. (`{ key1: value1, key2: value2 }` 형태)
- `setCookie`: 새로운 쿠키를 설정하는 함수입니다.
```jsx
const [cookies, setCookie] = useCookies();
```
이 코드는 **쿠키를 가져오고, 쿠키를 저장하는 기능을 사용할 준비를 하는 코드**입니다.


## **2. `const [cookies, setCookie] =`는 무슨 뜻인가?**
이 부분을 쉽게 풀어 보면:
```jsx
const [a, b] = [1, 2];
```
즉,
```jsx
const [cookies, setCookie] = useCookies();
```
- `cookies` → 현재 저장된 **쿠키 값들**
- `setCookie` → **쿠키를 저장하는 함수**  
을 받아서 각각 변수에 넣는 것입니다.

⬛ 이코드에서 =(이꼬르)는 오른쪽에서 실행한 결과를 왼쪽 변수들에 나눠 담는 역할을 합니다.

⬛ useCookies()` 실행 → 결과를 반환
먼저, `useCookies()`라는 함수를 실행하면 **결과값(배열)**이 나옵니다.  
예를 들어, `useCookies()`가 아래처럼 동작한다고 가정해 봅시다:
```jsx
function useCookies() {
  return [{ user: "Alice" }, function setCookie() { console.log("쿠키 저장"); }];
}
```
이 함수가 실행되면, 결과는 **배열**처럼 생긴 값이 됩니다:
```jsx
[{ user: "Alice" }, function setCookie() { console.log("쿠키 저장"); }]
```

⬛ = (이꼬르)의 역할: 구조 분해 할당
이제 **이 값을 변수로 나눠 저장**하려면 구조 분해 할당(Destructuring Assignment)**을 사용합니다.
```jsx
const [cookies, setCookie] = useCookies();
```
➡ `cookies = { user: "Alice" }`  
➡ `setCookie = function setCookie() { console.log("쿠키 저장"); }`

즉, `useCookies()`가 준 값을 **각각의 변수에 저장**하는 것입니다.

⬛ 정리
```jsx 
const [cookies, setCookie] = useCookies();
```
- 오른쪽 useCookies()를 실행해서 결과를 얻음
- 왼쪽 cookies와 setCookie 에 각각 나눠 저장
- cookies: 쿠키 값들이 들어 있는 객체
- setCookie: 쿠키를 저장하는 함수
- 결론 =는 useCookies() 실행 결과를 받아서 왼쪽 변수들에 나누너 담는 역할을 함

## **3. 예제로 이해해 보자**

쿠키 확인
```jsx
const [cookies] = useCookies();
console.log(cookies); // 현재 저장된 모든 쿠키를 보여줌
```

쿠키 저장
```jsx
const [cookies, setCookie] = useCookies();

setCookie("username", "JohnDoe", { path: "/" }); 
// "username"이라는 쿠키를 "JohnDoe" 값으로 저장
```

쿠키 읽기
```jsx
console.log(cookies.username); // "JohnDoe" 출력
```

쿠키를 설정하고 버튼으로 실행
```jsx
import { useCookies } from "react-cookie";

const MyComponent = () => {
  const [cookies, setCookie] = useCookies();

  const saveCookie = () => {
    setCookie("user", "Alice", { path: "/" });
  };

  return <button onClick={saveCookie}>쿠키 저장</button>;
};
``