[React] 📘로컬 스토리지 사용하기

📘 React에서 로컬 스토리지 사용하기

아래 useState로 저장된 새로운 값을
새로고침 시에도 로컬 스토리지에 저장하고 싶다면

const [text, setText] = useState("Hello world")

useEffect를 불러와 아래처럼 사용하면 된다.

import { useState, useEffect } from "react";

const [text, setText] = useState(() => JSON.parse(window.localStorage.getItem("Text")) || "Hello world");

useEffect(() => {
  window.localStorage.setItem("Text", JSON.stringify(text));
}, [text]);

📘 커스텀 훅 함수로 재사용성 높이기

여러 컴포넌트에서 로컬 스토리지가 필요하다면
커스텀 훅 함수로 뽑아내서 중복되는 코드를 줄일 수 있다.

import { useState, useEffect } from "react";

const useLocalStorage = (key, initialState) => {
  const [state, setState] = useState(
    () => JSON.parse(window.localStorage.getItem(key)) || initialState
  );

  useEffect(() => {
    window.localStorage.setItem(key, JSON.stringify(state));
  }, [key, state]);

  return [state, setState];
}

export default useLocalStorage;

-----
// 아래처럼 사용할 수 있음
const [text, setText] = useLocalStorage("Text", "Hello world");

❗️참고) 커스텀 useEffect 훅 함수 이름 앞에는 꼭 use를 붙여주어야 한다.

📘 사용 예시

아래는 텍스트 박스의 텍스트 내용이
로컬 스토리지에 저장되게끔 만든 Click-To-Edit UI 코드이다.

import { useState, useEffect } from "react";

function App() {
  const [text, setText] = useState(() => JSON.parse(window.localStorage.getItem("Text")) || "Hello world");
  const [isEditable, setIsEditable] = useState(false);

  useEffect(() => {
    window.localStorage.setItem("Text", JSON.stringify(text));
  }, [text]);

  const handleDoubleClick = () => {
    setIsEditable(true);
  };

  const handleChange = (e) => {
    setText(e.target.value);
  };

  const handleKeyDown = (e) => {
    if (e.key === "Enter") {
      setIsEditable(false);
    }
  };

  return (
    <div className="App">
      <h1>Click-To-Edit UI</h1>
      <p className="description">Double click the text below to edit.</p>
      {isEditable ? (
        <input type="text" value={text} onChange={handleChange} onKeyDown={handleKeyDown} />
      ) : (
        <p onDoubleClick={handleDoubleClick}>{text}</p>
      )}
    </div>
  );
}

export default App;

👉 React에서 웹 스토리지 사용하기