Logo

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

이번 포스팅에서는 React에서 웹 스토리지를 사용해서 컴포넌트의 상태를 유지시키는 방법에 대해서 살펴보겠습니다.

useState()로 유실되는 상태 관리하기

React에서 제공하는 useState() 훅 함수를 사용하면 컴포넌트의 상태를 간편하게 관리할 수 있는데요.

예를 들어, 버튼 클릭 횟수에 대한 상태 관리가 필요한 간단한 카운터 컴포넌트를 작성해보겠습니다.

// VolatileCounter.jsx

import React, { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

너무 당연한 얘기겠지만 페이지를 새로 고침하는 순간 기존의 count 상태값은 사라집니다. 만약에 이 컴포넌트의 상태값을 웹 스토리지를 이용해서 유지시키고 싶다면 어떻게 해야 할까요?

웹 스토리지(Web Storage) 브라우저 상에 데이터를 저장하기 위한 기술입니다. 이에 대한 자세한 내용은 관련 포스팅를 참고하시길 바랍니다.

useEffect()로 웹 스토리지에 상태 저장하기

React의 useEffect() 훅 함수를 사용하면 컴포넌트의 상태값을 웹 스토리지에 쉽게 저장해둘 수 있습니다.

예를 들어, 위에서 작성한 카운터 컴포넌트의 상태값이 로컬 스토리지에 저장되도록 코드를 변경해보겠습니다.

// PersistentCounter.jsx

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

function Counter() {
  const [count, setCount] = useState(
    () => JSON.parse(window.localStorage.getItem("count")) || 0
  );

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

  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

변경 코드에서는 count 상태값이 변경될 때 마다 로컬 스토리지에 해당값이 저장되도록 useEffect() 훅 함수를 호출하고 있습니다. useState() 훅 함수를 호출하는 부분도 로컬 스토리지에 저장해둔 count 상태값을 꺼내쓸 수 있도록 약간 변경을 해주었습니다.

웹 스토리지는 오직 문자형(string) 데이터 타입만 지원하기 때문에 데이터를 쓰기 전에 JSON.stringify() 함수로 직렬화(serialization) 하고, 읽기 전에 JSON.parse() 함수로 역직렬화(deserialization) 해야하오니 이 부분 주의 바랍니다.

커스텀 훅 함수로 추출하여 재사용성 높이기

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

// useLocalStorage.js

import { useState, useEffect } from "react";

function 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;

이렇게 로컬 스토리지를 통해 상태를 유지시키는 코드를 일반화시켜서 커스텀 훅 함수로 만들면 다른 컴포넌트에서도 편리하게 사용할 수 있습니다.

예를 들어, 스위치가 켜져 있는지 꺼져 있는지에 대한 상태 관리가 필요한 컴포넌트를 커스텀 훅 함수를 이용해서 작성해보겠습니다.

// PersistentSwitch.jsx

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

function Switch() {
  const [on, setOn] = useLocalStorage("on", false);

  return <button onClick={() => setOn(!on)}>{on ? "ON" : "OFF"}</button>;
}

마치 React 훅 함수 useState()를 사용하듯이 코드가 매우 깔끔해진 것을 볼 수 있습니다. ✨

전체 코드

제가 포스팅에서 작성한 전체 코드는 아래에서 직접 확인하고 실행해볼 수 있습니다.

마치면서

이상으로 React 훅 함수를 이용해서 어떻게 웹 스토리지를 사용하고 컴포넌트의 상태를 유지할 수 있는지에 대해서 알아보았습니다. 혹시 본 포스팅가 따라오기 어려우셨다면 아래 React 훅 함수 관련 포스팅도 함께 읽어보시기를 추천드립니다.

This work is licensed under CC BY 4.0

messageCircle