[React] 리액트 localStorage를 활용해서 페이지데이터 유지하기

1. [React] 리액트 localStorage를 활용해서 페이지데이터 유지하기

---

프로젝트를 진행하던 중, 게시글 작성 페이지에서 데이터 유지관련하여 문제가 있었다.

게시글 작성 페이지가 4개로 나뉘어져 있는데, 페이지를 이동할 때 페이지가 재렌더링이 되어 입력된 데이터가 초기화 되는 것이 문제였다..

페이지 이동시에도 데이터가 유지될 수 있는 방법을 찾던 중, 로컬 스토리지를 알게 되었고 이를 활용해서 문제를 해결 할 수 있었다 !

문제를 해결하기 위해 사용한 코드와 관련 자료를 남긴다.

///  useEffect와 watch를 활용해 데이터 값이 바뀔때 마다 localStorage에 데이터를 저장해 주었다.
const { register, watch, setValue } = useForm();

useEffect(() => {
  const subscription = watch((value) => {
    localStorage.setItem('source', JSON.stringify(value));
  });
}, [watch]);

// 페이지가 처음 렌더링 될때, 로컬스토리지에서 값을 가져옵니다.
useEffect(() => {
  if (localStorage.getItem('source')) {
    const getSource = JSON.parse(localStorage.getItem('source'));
    SourceList.forEach((el, idx) => {
      setValue(`source_${idx + 1}`, eval(`getSource.source_${idx + 1}`));
    });
    SourceList.forEach((el, idx) => {
      setValue(`volume_${idx + 1}`, eval(`getSource.volume_${idx + 1}`));
    });
  }
}, []);

eval 함수는 보안적이슈때문에 사용하는걸 지양해야한다는 말이 많은 것 같아.. 대체 방법을 찾아봐야 할 것 같다.. !

---

2. 관련 링크

[ localStorage 사용방법 ]

https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage