use-cookie+ Cookie

cookie(쿠키) ==> 사이트 방문하고 이용할 때 브라우저에 저장되는 내용 
서버(server)는 cookie를 이용해서 브라우저에 데이터를 넣을 수 있다. 
브라우저:   내가 가지고 있는 정보라고 생각해 주면  됩니다 

서버에서  브라우저로 response

브라우저에서 서버로 request

<<설치 명령어>>

npm i --save @types/reac/cookie

react-cookie: 리액트에서 쿠키를 쉽게 관리 할수 있는 라이브러리 
===> 쿠키의 생성 , 접근, 수정, 삭제 기능을 담당

기본 사용방법 
const [cookie, setCookie(name , {option}), removeCookie(name , {option})] = useCookie(['쿠키 이름']); 
cookie: 쿠키 ->모든쿠키가 포함된 JS객체 키-쿠키이름  
setCookie:  쿠키값 설정 
removeCookie: 쿠키 제거 

useCookie 훅에 전달되는 배열(인자 값)
- 배열로 관리하고자 하는 쿠기의 이름을 전달 
-쿠키에 대한 접근 : cookie.쿠키이름 -> 쿠키값 반환 
option

path : 쿠키가 유효한 경로를 지정
 - 주로  ' /'를 설정하여 모든 경로에서 유효하도록 쿠키를 설정
 expires : 쿠키의 만료 시간을 설정 -특정 날짜와 시간 경과 후 만료되도록 설정
 maxAge: 쿠키의 유효 시간을 초 단위로 설정 - 현재 시간부터 지정한 시간동안 쿠키가 유지   (생성된 지점으로부터 시간을 기준으로 유효 시간 설정) 
secure:  true로 설정시 HTTPs에서만 쿠키가 전송  
sameSite: 쿠키가 전송될 조선을 제한  - 'strict'다른 사이트에서 요청에서는 쿠키가 포함되지 않도록 제한 

export default function D_react_cookie() {
  const [cookies,setCookie,removecookie] = useCookies(['user']);

  const handleClickCookie =()=>  {
   //setCookie('쿠키이름',쿠키값,옵션 설정- 선택 )
   setCookie('user','이승아',{// user 쿠키 이름 
    path:'/',
    //new Date(): 새로운 날짜 지정 
    // -Date.now() : 현재 날짜를 반환 -밀리초 단위 
    //1000* 60 *60 *24 =1일 
    expires: new Date(Date.now()+ 1000* 60 *60 *24)
    });

  }

  const handleRemoveCookie= ()=>{
    //removeCookie('쿠키이름',옵션 설정 -선택)
    removecookie('user',{path: '/'})
  }  
  return (
    <div>
      <button onClick={handleClickCookie}>쿠키 설정 버튼</button>
      <button onClick={handleRemoveCookie}>쿠키 삭제 버튼</button>

      User Cookie: {cookies.user}
    </div>
  )
}

나중에 코드 따라 해보세요