[React] ID 기억하기 cookie에 값 저장 (react-cookie)

Cookie를 사용한 아이디 기억하기 기능 구현

 

모듈 설치

npm install reack-cookie

 

useCookies 선언

import { useCookies } from "react-cookie";

JS 부분

    
   /*====== Cookie에 저장하여 사용할 값 선언======*/
    
    const [userid, setUserid] = useState("");
    
   /*============================*/
   
   /*====== Cookie 관련 선언======*/
    const [cookies, setCookie, removeCookie] = useCookies(["rememberUserId"]); #Cookies 이름
    const [isRemember, setIsRemember] = useState(false); #아이디 저장 체크박스 체크 유무

	/*페이지가 최초 렌더링 될 경우*/
    useEffect(() => {
    	/*저장된 쿠키값이 있으면, CheckBox TRUE 및 UserID에 값 셋팅*/
        if (cookies.rememberUserId !== undefined) {
            setUserid(cookies.rememberUserId);
            setIsRemember(true);
        }
    }, []);

    const handleOnChange = (e) => {
        setIsRemember(e.target.checked);
        if (!e.target.checked) {
            removeCookie("rememberUserId");
        }
    };

    /*============================*/

 

JSX 부분 

  <div className="login-id">
    <h4>User ID</h4>
    <input
        type="email"
        id="userid"
        defaultValue={userid}
        placeholder="name@domain.com "
        onChange={(e) => {
            setUserid(e.target.value);
        }}
    />
</div>


<div className="saveId">
    <input
        type="checkbox"
        className="saveId-cb"
        id="saveId"
        name="saveId"
        onChange={(e) => {
            handleOnChange(e);
        }}
        checked={isRemember}
    />{" "}
    <label for="saveId">Save ID</label>
</div>