개요

라벨스티커 특성상 작성해야할 문자열이 많기에, 피치못하게 새로고침 되는 상황에서 문자열들이 세션에 저장될 수 있도록 만들었다.

스티커를 만들 때, 한번에 만들 것이라고 짐작하고, 로컬이 아닌 세션에 만드는 것으로 결정했다.

값 세션에 저장 & 불러오기

const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
  e.preventDefault();
  window.sessionStorage.setItem("inputValue", JSON.stringify(inputValue));
};

onSubmit버튼을 만들고, 버튼을 누르면 세션이 저장될 수 있게 만들었다.

const [inputValue, setInputValue] = useState(
  JSON.parse(sessionStorage.getItem("inputValue") || "{}"),
);

useEffect(() => {
  window.sessionStorage.setItem("inputValue", JSON.stringify(inputValue));
}, [inputValue]);

value의 초기값을 세션의 저장된 값이거나, 빈 객체를 반환하도록 만들고,

useEffect를 사용해 inputValue가 변경될때마다 세션에 목록이 다시 저장되도록 만들었다.

JSX

<input type="text" name={name} value={inputValue[`${name}`]} />

input의 value에서 값을 불러온다

참조

const onchange = (e: React.FormEvent<HTMLFormElement>) => {
  const { name, value } = e.target as HTMLInputElement;
  setInputValue({ ...inputValue, [name]: value });
};

onChange이벤트에서 값을 저장할 때 { key : 값 }의 형태로 저장했기 때문에, 불러올 때에는 해당 키를 입력하기만 하면 값을 불러올 수 있다.

ERROR

input 태그 사용시 value속성이 고정값이 아니라 나는 에러. 나의 경우엔 sessionStorage가 비워지자 나옴

해결책

<input type="text" name={name} value={inputValue[`${name}`]} />

<input type="text" name={name} defaultValue={inputValue[`${name}`]} />

에러에서 언급하는데로, value를 defaultValue로 변경하면 된다.