[React] localStorage에 최근 검색어 저장하기

이슈 사항

• localStorage에 최근 검색어 array를 저장하지만 새로고침 시 array가 초기화됨

이전 코드

• localStorage에 저장하는 관련 코드

...
  const [recentKeyword, setRecentKeyword] = useState(
    JSON.parse(localStorage.getItem('recentkeyword') || '[]')
  );
...
  const checkMaximumRecentSearch = (): boolean => {
    const MAXIMUM_SIZE = 10;
    return recentKeyword.length > MAXIMUM_SIZE;
  };

  useEffect(() => {
    const newRecentKeyword = checkMaximumRecentSearch()
      ? [...recentKeyword.slice(0, -1)]
      : recentKeyword;

    localStorage.setItem('recentKeyword', JSON.stringify(newRecentKeyword));
    setRecentKeyword(newRecentKeyword);
  }, [recentKeyword]);

수정 코드

• state가 새로고침하면서 초기화 되는 거라 판단하고 다른 방법을 찾음

...
  const loadedRecentKeyword = localStorage.getItem('recentKeyword')
    ? JSON.parse(localStorage.getItem('recentKeyword')!)
    : [];

  const [recentKeyword, setRecentKeyword] = useState(loadedRecentKeyword);

...

  const checkMaximumRecentSearch = (): boolean => {
    const MAXIMUM_SIZE = 10;
    return recentKeyword.length > MAXIMUM_SIZE;
  };

  useEffect(() => {
    const newRecentKeyword = checkMaximumRecentSearch()
      ? [...recentKeyword.slice(0, -1)]
      : recentKeyword;

    window.localStorage.setItem(
      'recentKeyword',
      JSON.stringify(newRecentKeyword)
    );
    setRecentKeyword(newRecentKeyword);
  }, [recentKeyword]);

참고 사이트

stackoverflow - localStorage is saving my data but after refresh is reseting and empty it