react-cookie 패키지:

• react에서 쿠키를 손쉽게 관리 할 수 있도로고 도움을 주는 패키지
• 쿠키 설정, 검색, 삭제를 간단한 함수로 작업할 수 있음

React Cookie Package Install

$ npm install react-cookie

쿠키(Cookie)

• 클라이언트가 특정한 웹 서비스에 방문하여 사용 중 해당 서비스에서 필요한 데이터를 클라이언트 브라우저에 저장하는 기술
• 이름, 값, 만료일, 도메인, 경로가 포함됨

React Cookie Hook Function

useCookies()

• 리액트에서 쿠키 객체, 쿠키 변경 함수, 쿠키 제거 함수를 배열로 반환하는 react-cookie의 훅 함수

// [쿠키 객체, 쿠키 변경 함수, 쿠키 제거 함수]
const [cookies, setCookie, removeCookie] = useCookies();

React Cookie Set function (setCookie)

setCookie()

setCookie 함수를 사용하여 쿠키를 추가할 수 있음

매개변수

1. 첫번째 매개변수 : 쿠키 이름
2. 두번째 매개변수 : 쿠키 값
3. 세번째 매개변수(선택) : 옵션 지정

setCookie(name, value);

옵션

• path : 해당 쿠키가 적용될 경로
• expires : 만료시간

setCookie(name, value, { path: '/zustand' });

React Cookies 객체 (cookies)

cookies{}

cookies 객체에 브라우저가 가지고 있는 쿠키 정보가 담겨있음

쿠키 객체를 호출하여 alert로 출력

1. alert(JSON.stringify(cookies));
2. alert(cookies.first);
3. alert(cookies[name]);

React Cookie 객체 삭제 (removeCookie)

removeCookie()

removeCookie 함수를 사용하여 쿠키 제거 가능

매개변수

1. 첫번째 매개변수: 쿠키 이름
2. 두번째 매개변수: 옵션

removeCookie(name);

전체 소스코드

export default function ReactCookie() {

    const [cookies, setCookie, removeCookie] = useCookies();

    const [name, setName] = useState<string>('');
    const [value, setValue] = useState<string>('');

    const onNameChangeHanlder = (event: ChangeEvent<HTMLInputElement>) => {
        const { value } = event.target;
        setName(value);
    };

    const onValueChangeHanlder = (event: ChangeEvent<HTMLInputElement>) => {
        const { value } = event.target;
        setValue(value);
    };

    const onAddClickHandler = () => {
        const now = new Date();
        const expires = new Date(now.setSeconds(now.getSeconds() + 10));
        setCookie(name, value, { path: '/', expires });
    };

    const onShowClickHandler = () => {

        alert(cookies[name]);
    };

    const onRemoveClickHandler = () => {
    
        removeCookie(name, { path: '/zustand' });
    };

    return (
        <div>
            <input value={name} onChange={onNameChangeHanlder} />
            <input value={value} onChange={onValueChangeHanlder} />
            <button onClick={onAddClickHandler}>쿠키 추가</button>
            <button onClick={onShowClickHandler}>쿠키 확인</button>
            <button onClick={onRemoveClickHandler}>쿠키 제거</button>
        </div>
    )
}