[React] 새로고침시 값 유지하기(localStorage)

• 보낼 때

inputValue키에 inputValue를 담아 보냈다.
(여기서 inputValue는 input에 입력하면 set이 된다.)

                <button
                  type="submit"
                  onClick={() =>
                    test.push({
                      pathname: "/youtubeMain",
                      inputValue: inputValue,
                    })
                  }
                >

• 받을 때

/// 넘어온 inputValue가 저장되는 state
let [name, setName] = useState();
const history = useHistory();
const inputValue = history.location.inputValue;

///useEffect() 활용하여 `name`이라는 키로 inputValue를 저장하였다. 
  useEffect(() => {
    localStorage.setItem("name", JSON.stringify(inputValue));
    
/// 새로고침 시, localStorage에 id의 값이 있다면 그 값을 `setName`에 저장해준다. 
    const saved = localStorage.getItem("id");
    if (saved !== null) {
      setName(saved);
    }
  }, [inputValue]);

• 결과 확인
  

🤦‍♀️ 하지만 새로고침을 하면 값이 사라지는 것을 볼 수 있었다.

마찬가지로 component로 확인해보면

<새로고침하기전>

<새로고침하고난 후>

inputValue가 사라지는 걸 확인할 수 있었다.

🤷‍♀️ 해결방법으로 history push할 때 state에 넣어보낸 후 받으면 새로고침후에도 값이 남아있다!

• 보낼 때

                <button
                  type="submit"
                  onClick={() =>
                    test.push({
                      pathname: "/youtubeMain",
                      state: inputValue,
                    })
                  }
                >

• 받을 때

const inputValue = history.location.state;

  localStorage.setItem("id", JSON.stringify(inputValue));

  useEffect(() => {
    const saved = localStorage.getItem("id");
    if (saved !== null) {
      setName(saved);
    }
  }, [inputValue]);

setItem은 if문 밖에서 저장해주었다.
else에 설정을 하면 처음 로그인시 받았던 값을 로컬스토리지에 저장한다.
그리고 다시 두번째 로그인을 하면 새로 입력 받은 값을 로컬스토리지에 저장하는 else가 실행되는 것이 아니라,
if조건에 충족되어 getItem을 가져와 saved에 저장해준다.
그러면 결국 바뀐 값을 저장하는 것이 아니라 처음 입력 받았던 값을 계속해서 저장하고있다.

그래서 위와 같이 seteItem을 밖으로 빼주었고 새로 들어오는 inputValue를 로컬스토리지에 저장하도록 설정했다.