React usePersistedState 훅 마스터하기: 로컬 스토리지 활용

소개

이 랩에서는 localStorage에 상태 값을 지속적으로 저장할 수 있게 해주는 React 의 usePersistedState 훅에 대해 배우겠습니다. 저장된 값을 초기화하고 업데이트하는 방법, 그리고 키 이름 변경을 처리하는 방법을 살펴보겠습니다. 이 랩을 마치면, 페이지를 새로 고친 후에도 특정 데이터를 저장하고 검색할 수 있도록 React 애플리케이션에서 이 훅을 사용할 수 있게 됩니다.

React usePersistedState Hook

index.html 및 script.js는 이미 VM 에 제공되었습니다. 일반적으로 script.js와 style.css에만 코드를 추가하면 됩니다.

이 훅은 localStorage에 지속적으로 저장되는 상태 값과 함께 이를 업데이트하는 데 사용할 수 있는 함수를 반환합니다. 사용하려면 다음 단계를 따르세요.

useState() 훅을 사용하여 value를 defaultValue로 초기화합니다.
useRef() 훅을 사용하여 Window.localStorage에 있는 값의 name을 저장할 ref 를 생성합니다.
초기화, value 변경, name 변경을 위해 각각 useEffect() 훅의 3 개 인스턴스를 사용합니다.
컴포넌트가 처음 마운트될 때, 저장된 값이 있으면 Storage.getItem()을 사용하여 value를 업데이트하고, 그렇지 않으면 Storage.setItem()을 사용하여 현재 값을 지속적으로 저장합니다.
value가 업데이트되면 Storage.setItem()을 사용하여 새 값을 저장합니다.
name이 업데이트되면 Storage.setItem()을 사용하여 새 키를 생성하고, nameRef를 업데이트하며, Storage.removeItem()을 사용하여 이전 키를 Window.localStorage에서 제거합니다.
이 훅은 기본 값 (예: 객체가 아닌) 과 함께 사용하도록 설계되었으며, 다른 코드에 의한 Window.localStorage 변경 사항은 고려하지 않습니다. 이 두 가지 문제는 쉽게 처리할 수 있습니다 (예: JSON 직렬화 및 'storage' 이벤트 처리).

다음은 코드입니다.

const usePersistedState = (name, defaultValue) => {
  const [value, setValue] = React.useState(defaultValue);
  const nameRef = React.useRef(name);

  React.useEffect(() => {
    try {
      const storedValue = localStorage.getItem(name);
      if (storedValue !== null) {
        setValue(storedValue);
      } else {
        localStorage.setItem(name, defaultValue);
      }
    } catch {
      setValue(defaultValue);
    }
  }, []);

  React.useEffect(() => {
    try {
      localStorage.setItem(nameRef.current, value);
    } catch {}
  }, [value]);

  React.useEffect(() => {
    const lastName = nameRef.current;
    if (name !== lastName) {
      try {
        localStorage.setItem(name, value);
        nameRef.current = name;
        localStorage.removeItem(lastName);
      } catch {}
    }
  }, [name]);

  return [value, setValue];
};

const MyComponent = ({ name }) => {
  const [value, setValue] = usePersistedState(name, 10);

  const handleInputChange = (event) => {
    setValue(event.target.value);
  };

  return <input value={value} onChange={handleInputChange} />;
};

const MyApp = () => {
  const [name, setName] = React.useState("my-value");

  const handleInputChange = (event) => {
    setName(event.target.value);
  };

  return (
    <>
      <MyComponent name={name} />
      <input value={name} onChange={handleInputChange} />
    </>
  );
};

ReactDOM.createRoot(document.getElementById("root")).render(<MyApp />);

오른쪽 하단의 'Go Live'를 클릭하여 포트 8080 에서 웹 서비스를 실행하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.

React usePersistedState Hook

소개

React usePersistedState Hook

요약