React에서 Web Storage API 사용하기

 

1. Web Storage API란?

Web Storage API는 웹 브라우저에서 데이터를 저장할 수 있도록 제공하는 기능입니다. 이를 사용하면 서버에 요청을 보내지 않고도 클라이언트 측에서 데이터를 저장하고 관리할 수 있습니다. Web Storage API는 두 가지 주요 저장소를 제공합니다.

• 로컬 스토리지(Local Storage): 브라우저에 데이터를 영구적으로 저장합니다. 브라우저를 닫아도 데이터는 삭제되지 않습니다.
• 세션 스토리지(Session Storage): 브라우저 세션이 유지되는 동안에만 데이터를 저장합니다. 브라우저를 닫으면 데이터는 삭제됩니다.

React 애플리케이션에서는 Web Storage API를 활용하면 상태(state)를 로컬에 저장하거나 사용자 설정 데이터를 보존하는 데 매우 유용합니다.

---

2. Web Storage API와 React의 관계

React는 UI를 효율적으로 렌더링하기 위한 프레임워크입니다. 데이터를 상태(state)나 props로 관리하는 것이 일반적이지만, 데이터를 브라우저에 저장해 재사용성과 유지성을 높이기 위해 Web Storage API를 활용할 수 있습니다.

주요 활용 사례는 다음과 같습니다:

• 사용자 인증 상태 저장: JWT 토큰, 사용자 로그인 정보
• 사용자 설정 유지: 다크 모드, 언어 설정 등
• 임시 데이터 저장: 입력 폼 내용, 캐시 데이터

---

3. 로컬 스토리지(Local Storage) 활용법

3.1 기본 개념

로컬 스토리지는 데이터를 키-값 쌍(Key-Value Pair)으로 저장합니다. 저장된 데이터는 문자열로 저장되며, JSON 데이터를 저장하려면 **JSON.stringify()**와 **JSON.parse()**를 사용해야 합니다.

3.2 React 컴포넌트에서 로컬 스토리지 사용하기

아래 예제는 React에서 로컬 스토리지를 사용하여 사용자 설정 값을 저장하고 불러오는 방법을 보여줍니다.

import React, { useState, useEffect } from 'react';

const UserSettings = () => {
  // 로컬 스토리지에서 theme 가져오기
  const getInitialTheme = () => {
    return localStorage.getItem('theme') || 'light';
  };

  const [theme, setTheme] = useState(getInitialTheme);

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

  const toggleTheme = () => {
    setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
  };

  return (
    <div className={theme}>
      <h1>{`현재 테마: ${theme}`}</h1>
      <button onClick={toggleTheme}>테마 변경</button>
    </div>
  );
};

export default UserSettings;

설명:

1. getInitialTheme 함수: 컴포넌트가 마운트될 때 로컬 스토리지에서 theme 값을 가져옵니다. 없으면 light를 기본값으로 사용합니다.
2. useEffect: theme 값이 변경될 때마다 로컬 스토리지에 해당 값을 저장합니다.
3. toggleTheme: 테마를 전환하는 함수입니다.

---

4. 세션 스토리지(Session Storage) 활용법

4.1 기본 개념

세션 스토리지는 로컬 스토리지와 비슷하지만, 브라우저 세션이 종료되면 데이터가 삭제됩니다.

4.2 React에서 세션 스토리지 사용하기

아래 예제는 세션 스토리지를 사용하여 임시 데이터를 저장하는 방법입니다.

import React, { useState, useEffect } from 'react';

const SessionForm = () => {
  const [input, setInput] = useState(sessionStorage.getItem('input') || '');

  useEffect(() => {
    sessionStorage.setItem('input', input);
  }, [input]);

  return (
    <div>
      <h2>세션 스토리지 예제</h2>
      <input
        type="text"
        value={input}
        onChange={(e) => setInput(e.target.value)}
        placeholder="임시 입력값"
      />
      <p>세션 스토리지에 저장된 값: {input}</p>
    </div>
  );
};

export default SessionForm;

설명:

1. 초기값 설정: sessionStorage.getItem()을 통해 세션 스토리지에서 데이터를 가져옵니다.
2. 데이터 저장: useEffect를 이용해 입력값이 변경될 때마다 세션 스토리지에 저장합니다.

---

5. 커스텀 훅(Custom Hook)으로 코드 재사용하기

로컬 스토리지나 세션 스토리지를 반복해서 사용해야 한다면, 커스텀 훅을 만들어 코드의 재사용성을 높일 수 있습니다.

5.1 useLocalStorage 훅 만들기

import { useState, useEffect } from 'react';

function useLocalStorage(key, initialValue) {
  const [storedValue, setStoredValue] = useState(() => {
    const item = localStorage.getItem(key);
    return item ? JSON.parse(item) : initialValue;
  });

  const setValue = (value) => {
    setStoredValue(value);
    localStorage.setItem(key, JSON.stringify(value));
  };

  return [storedValue, setValue];
}

export default useLocalStorage;

5.2 사용 예시

import React from 'react';
import useLocalStorage from './useLocalStorage';

const ExampleComponent = () => {
  const [name, setName] = useLocalStorage('name', '');

  return (
    <div>
      <h2>이름 저장</h2>
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="이름 입력"
      />
      <p>저장된 이름: {name}</p>
    </div>
  );
};

export default ExampleComponent;

설명:

• useLocalStorage: 키와 초기값을 인자로 받아 로컬 스토리지에서 데이터를 관리합니다.
• 컴포넌트에서 로컬 스토리지를 간단히 사용할 수 있습니다.

---

6. 로컬 스토리지와 상태 관리 라이브러리 비교

React에서 로컬 스토리지는 상태를 장기적으로 저장할 때 유용하지만, 글로벌 상태 관리가 필요한 경우 Redux나 Context API와 함께 사용할 수 있습니다.

비교 요약:

기능 로컬 스토리지 Redux/Context API

데이터 저장 범위	브라우저 저장소	메모리 (런타임)
지속성	영구적	페이지 새로고침 시 초기화
사용 편의성	간단한 API 활용	설정 및 구성이 필요

---

7. 결론

React에서 Web Storage API를 활용하면 브라우저에 데이터를 저장하고 효율적으로 상태를 관리할 수 있습니다. 로컬 스토리지는 영구적으로 데이터를 보존할 때, 세션 스토리지는 임시 데이터를 저장할 때 유용합니다. 또한 커스텀 훅을 사용하면 코드 재사용성을 높여 더욱 깔끔한 코드를 작성할 수 있습니다.

React 프로젝트에 Web Storage API를 잘 활용하면 사용자 경험을 극대화할 수 있습니다. 필요에 따라 로컬 스토리지와 상태 관리 도구를 적절히 조합하여 사용해 보세요!