Recoil을 사용한 React 상태 관리(6): Recoil에서 Persist 상태 관리

Recoil에서 Persist 상태 관리

개요:

Recoil에서 상태를 유지하는 방법으로, 브라우저를 새로고침하거나 애플리케이션을 닫았다가 다시 열 때도 상태가 유지되도록 해야 하는 경우가 있습니다. 이 강의에서는 Recoil 상태를 로컬 스토리지에 저장하고 복구하는 방법에 대해 알아보며, 상태를 영속화(persist)하는 다양한 기법을 다룹니다.

Recoil에서 Persist 상태 관리

다룰 주제:

1. Recoil 상태와 영속화: 로컬 스토리지에 상태 저장의 필요성.
2. 상태 저장 및 복구 방법: useEffect를 사용하여 상태를 로컬 스토리지에 저장하고 복구하는 방법.
3. 영속화에 유용한 Recoil 미들웨어 또는 플러그인 활용: persistState 같은 외부 라이브러리를 활용하여 간편하게 상태를 저장하고 복구하는 방법.

실습:

1. Recoil 상태를 로컬 스토리지에 저장하는 기본 예제:
   • Atom을 사용하여 상태 생성.
   • useEffect를 활용해 상태 변화를 감지하고, 로컬 스토리지에 저장.
   • 애플리케이션 시작 시 로컬 스토리지에서 해당 상태를 복구.

예제 코드:

import React, { useEffect } from 'react';
import { atom, useRecoilState } from 'recoil';

// 상태 저장할 atom 생성
const persistAtom = atom({
  key: 'persistAtom', // 고유한 key 설정
  default: '', // 기본 값 설정
});

const App = () => {
  const [inputValue, setInputValue] = useRecoilState(persistAtom);

  // useEffect로 로컬 스토리지에서 상태를 복구
  useEffect(() => {
    const savedValue = localStorage.getItem('persistAtom');
    if (savedValue) {
      setInputValue(savedValue);
    }
  }, [setInputValue]);

  // 상태 변경 시 로컬 스토리지에 저장
  useEffect(() => {
    localStorage.setItem('persistAtom', inputValue);
  }, [inputValue]);

  return (
    <div>
      <h1>Recoil Persist 상태 관리</h1>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
        placeholder="입력값을 저장합니다"
      />
    </div>
  );
};

export default App;

 

설명:

• 상태 저장 및 복구: useEffect를 통해 애플리케이션이 처음 로드될 때 로컬 스토리지에서 상태를 복구하고, 상태가 변경될 때마다 로컬 스토리지에 해당 상태를 저장합니다.
• 상태 영속화: 브라우저가 새로고침되거나 애플리케이션을 다시 열 때도 저장된 상태를 복구할 수 있습니다.