React LocalStorage 사용하는 방법

2023-04-06

안녕하세요.

지난 시간에는 React의 State Hook을 사용해서 상태값을 관리하는 기본적인 방법을 알아봤습니다.

이번 시간에는 LocalStorage를 사용해서 상태값을 관리하는 방법을 알아보겠습니다.

LocalStorage를 이용하면, 페이지를 새로고침해도 상태값이 유지됩니다.

<!DOCTYPE html>
<html lang="en">
<body>
  <div id="root"></div>
  <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script crossorigin src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <script type="text/babel">
    const rootElement = document.getElementById("root");

    const App = () => {
      const [keyword, setKeyword] = React.useState(window.localStorage.getItem("keyword") || "")
      const [result, setResult] = React.useState("")
      const [typing, setTyping] = React.useState(false)

      function handleChange(event) {
        window.localStorage.setItem("keyword", event.target.value)
        setKeyword(event.target.value)
        setTyping(true)
      }

      function handleClick() {
        setTyping(false)
        setResult(`We find results of ${keyword}`)
      }

      return (
        <>
          <input onChange={handleChange} value={keyword} />
          <button onClick={handleClick}>search</button>
          <p>{typing ? `Looking for ${keyword}...` : result}</p>
        </>
      )
    }

    ReactDOM.render(<App />, rootElement);

  </script>

</body>
</html>

window.localStorage.getItem("keyword") || "" 는 LocalStorage에 keyword라는 키값이 있으면 그 값을 가져오고, 없으면 빈 문자열을 가져오는 코드입니다.

handleChange 함수는 input의 value값이 변경될 때마다 실행되는 함수이며 window.localStorage.setItem("keyword", event.target.value) 를 통해 LocalStorage에 keyword라는 키값으로 event.target.value 값을 저장합니다.

따라서 새로고침 했을 때, LocalStorage에 keyword라는 키값이 있으면 그 값을 가져오고, 없으면 빈 문자열을 가져오기 때문에, input의 value값이 유지됩니다.

이때, localStorage를 읽고 쓰는 작업은 비동기적으로 이루어지기 때문에, useState의 초기값으로 localStorage의 값을 넣어주는 것은 좋지 않습니다.

이를 보완하기 위해서는 다음과 같이 초기값을 리턴해주는 함수형태로 넣어주는 것이 좋습니다.


const [keyword, setKeyword] = React.useState(() => window.localStorage.getItem("keyword") || "")

이렇게 하면, useState가 실행될 때, localStorage의 값을 읽어오는 작업이 실행되고, 그 다음에 useState의 초기값으로 localStorage의 값을 넣어주게 됩니다.

이렇게 react에서 localStorage를 사용해서 상태값을 관리하는 방법을 알아보았습니다.

감사합니다.

< 목록으로 돌아가기