Untitled

❌

let userId = localStorage.getItem(ID);
    if (userId !== "") {
      setEmail(userId);
    }

⭕

let userId = localStorage.getItem(ID);
    if (userId !== "") {
      setEmail(**JSON.parse**(userId));
    }

📌loginBtn

const handleLogin = (e) => {
    e.preventDefault();
		localStorage.setItem(ID, JSON.stringify(email));
    localStorage.setItem(CHECKED, saveChecked);
 };

✏️JSON.stringify(email) id 값은 문자열 형태로만 존재하지않고, 문자+숫자 형태 등 다양한 조합이 있을 수 있다. 따라서 JSON 문자열 형태로 변환해주는것이 일관성 있다.

check상태의 경우는 boolean 값으로 true 또는 false의 값만 가지고 있기 때문에 별다른 변환을 하지 않아도 된다.

📌 useEffect 전체

useEffect(() => {
		//checkbox 상태 가져오기
    let idChecked = JSON.parse(localStorage.getItem(CHECKED));
    if (idChecked) {
      setSaveChecked(idChecked);
    } else {
      localStorage.setItem(ID, "");
    }
		//저장되어 있는 id 값 가져오기
    let userId = localStorage.getItem(ID);
    if (userId !== "") {
      setEmail(JSON.parse(userId));
    }
  }, []);

  1. checkbox 상태 가져오기

    JSON 형태로 저장된 모든 data는 JSON 문자열로 저장되기 때문에 boolean 값도 문자열 형태로 저장된다. 따라서 반드시 JSON.parse( )의 작업을 거쳐 본래의 boolean 값을 받아와야한다.

  2. 저장되어 있는 id 값 가져오기

    userId는 어차피 문자열이고, 또 빈 값일 때, 변환해줄 수 없으므로 일단 localstorage에 저장된 JSON 문자열 형태 그대로 받아주고, id input에 보여줄때 변환해서 보여준다.

    Untitled