[React] Cookie 사용하여 아이디 저장하기

쿠키(Cookie)는 웹사이트에서 사용자의 브라우저에 저장하는 데이터 조각으로
일반적으로 세션 유지, 사용자 추적, 사용자의 기호 및 설정 저장 등의 용도로 사용되며 쿠키는 서버에서 전송된 HTTP 응답에 포함된다.
브라우저는 이 쿠키를 저장하고, 이후에 동일한 서버로 요청을 보낼 때 마다 이 쿠키를 함께 전송한다. 이를 통해 서버는 사용자에 대한 정보를 유지하고, 사용자의 경험을 개선하거나 맞춤화 할 수 있다.

---

• 쿠키사용을 위한 모듈 설치
  - npm install react-cookie

const [loginForm, setLoginForm] = useState({
    userId: "",
    userPassword: "",
  });
  
  
 /* 아이디 기억하기 */
 const [isRemember, setIsRemember] = useState(false);
 const [cookies, setCookie, removeCookie] = useCookies(["rememberUserId"]);


useEffect(() => {
    if (cookies.rememberUserId !== undefined) {
      setLoginForm({ ...loginForm, userId: cookies.rememberUserId });
      setIsRemember(true);
    }
  }, []);


const handleOnChange = (e) => {
    //체크박스 상태 업데이트
    setIsRemember(e.target.checked);
    if (e.target.checked) {
      //쿠키에 userId 값 저장, 유효기간 2000초
      setCookie("rememberUserId", loginForm.userId, { maxAge: 2000 });
    } else {
      //체크 안 되어 있으면 쿠키 삭제
      removeCookie("rememberUserId");
    }
  };

- 처음에 useEffect에서 setLoginForm.userId로 작성했다가 오류 발생.
setLoginForm은 함수이므로 이렇게 접근하면 오류가 발생하니 함수를 호출하여 상태를 업데이트 해야 한다. setLoginForm({ ...loginForm, userId: cookies.rememberUserId });

• return

<label for="idSet" class="sign_checkbox">
              <input
                type="checkbox"
                id="idSet"
                onChange={handleOnChange}
                checked={isRemember}
              />{""}
              <span class="cbx">
                <svg width="15px" height="15px" viewBox="0 0 15 15">
                  <polyline points="2 5 5 9 10 3"></polyline>
                </svg>
              </span>
              <span>아이디 기억하기</span>

</label>

---

- 아이디 기억하기 체크 -> 로그아웃 후 아이디 저장되어 있음

- 쿠키에도 역시 잘 저장되어 있음