[react] 계산기/새로고침해도 선택값 유지하기

 토큰을 선택했을 때 새로고침을 해도 초기값으로 바뀌지 않게 해보기!!!

 

 리액트에서 상태(state)가 새로고침될 때마다 초기값으로 돌아가는 것은 정상적인 동작이다. 페이지를 다시 로드할 때마다 새로운 인스턴스를 만들고 상태를 초기화한다. 

 

 그럼 값을 유지하려면? 그 값들을 컴포넌트 외부에 저장하기

 

<div className="flex flex-row justify-between">
                <input
                  type="number"
                  value={removeZeros(input)}
                  onChange={onChangeInput}
                  className="w-full text-xl bg-transparent text-zinc-200 appearance-none"
                  placeholder="0.0"
                />
                <div onClick={() => setTokenModalOpen(true)}>
                  <Label data={token} />
                </div>
              </div>

지금 코드는 이렇다... <Label/>에 token data를 넘기고 <Label/>안에선 이름만 출력해주는 식이다. 

 

const [token, setToken] = useState(tokens[0]);
const [token2, setToken2] = useState(tokens[1]);

...

{isTokenModalOpen && (
          <div>
            <Select setToken={setToken} setModalOpen={setTokenModalOpen} />
          </div>
        )}

Select라는 컴포넌트에 setToken을 전달해서 이 안에서 토큰을 세팅하게 한다. 

 

// 메인화면의 토큰 세팅
    props.setToken({
      id,
      name,
    });
       localStorage.setItem('token', JSON.stringify({ id, name }));
    props.setModalOpen(false);

이 부분에 로컬 스토리지를 이용하는 코드를 썼다. 

 

  useEffect(() => {
    const recentList = JSON.parse(sessionStorage.getItem("recentList") || "[]");
    setRecentTokens(recentList);

    const savedTokens = localStorage.getItem("token");

    if (savedTokens) props.setToken(JSON.parse(savedTokens));
  }, []);

useEffect에도 코드를 추가했다.

 

음 근데 새로고침해도 날라가네? 

 

useEffect를 쓴 곳이 Select 안이고, (Select는 라벨을 눌러야만 뜨기 때문에)라벨을 누르지 않고 새로고침을 하니 아예 useEffect 함수가 실행되지 않은 것이다.

 

그럼 savedTokens를 가져와서 세팅해주는 부분을 main으로 가져오면 될 것 같다.

그냥 잘라내서 부모 컴포넌트로 옮겼다. 

 

 

 

가져왔는데 반응이 없다.

savedTokens가 잘못됐나? 싶어서

setToken({ name: "HANI", id: "hani" });

 

로 해봤는데 적용되지 않는다. 

 

타이밍 차인가? 

근데 set함수를 쓰면 리렌더링이 일어나야 하는 거 아닌가?...

같은 값으로 바꾼 것도 아니고

 

 

    useEffect(() => {
      setToken(token);
      setToken2(token2);
    }, [token, token2]);

이런 대체 왜 있는지 모르겠는 그리고 의미가 없지않나 싶은 함수를 지우니 바로 해결됐다. 

뭘까... 왜 저렇게 써놨지? 조금 부끄럽네