[React] 웹 스토리지 (Web Storage)

React의 상태(state)는 기본적으로 자바스크립트 변수에 저장되기 때문에 페이지를 새로고침하거나 브라우저를 닫으면 초기화됩니다.
하지만 웹 스토리지(Web Storage)를 활용하면 데이터를 브라우저에 저장하여 새 로고침해도 유지할 수 있습니다.

데이터를 영구적으로 보관하려면 외부 데이터베이스를 사용해야 하지만,
간단하게 데이터를 저장하고 관리하는 방법으로 웹 스토리지를 활용하는 것이 좋습니다.

---

01

웹 스토리지 란?

웹 스토리지는 웹 브라우저에 기본적으로 내장된 데이터 저장소입니다.
따로 라이브러리를 설치하지 않고, 자바스크립트 내장 함수만으로 쉽게 데이터를 저장하고 불러올 수 있습니다.

주요특징으로는

• 브라우저가 기본적으로 제공하는 데이터 저장소
• 별도 설치 없이 자바스크립트 내장 함수로 접근 가능
• 새 로고침해도 데이터 유지 가능 (로컬 스토리지 사용 시)

---

02

웹 스토리지 종류

웹 스토리지는 로컬 스토리지(LocalStorage)와 세션 스토리지(SessionStorage)로 나뉩니다.

종류	저장 범위	데이터 유지 기간	예제
로컬 스토리지	사이트별 저장	브라우저를 종료해도 유지	localStorage.setItem("key", "value")
세션 스토리지	탭(세션)별 저장	해당 탭을 닫으면 삭제	sessionStorage.setItem("key", "value")

✅ 언제 로컬 스토리지를 사용할까요?

• 로그인 정보, 설정값, 사용자 환경 저장
• 페이지 새로고침 후에도 유지해야 하는 데이터

✅ 언제 세션 스토리지를 사용할까요?

• 임시 데이터 저장
• 브라우저 탭을 닫으면 사라져야 하는 데이터

---

03

웹 스토리지 기본 사용법

1. 데이터 저장하기

localStorage.setItem("username", "홍길동");  // "홍길동"을 username 키로 저장
sessionStorage.setItem("sessionKey", "12345"); // 세션 스토리지에 저장

2. 데이터 불러오기

const name = localStorage.getItem("username"); // "홍길동"을 불러옴
console.log(name);

3. 객체 저장하기 (JSON 변환)

로컬 스토리지는 문자열만 저장할 수 있습니다.
객체를 저장하려면 JSON.stringify()를 사용하여 문자열로 변환해야 합니다.

const user = { name: "홍길동", age: 30 };
localStorage.setItem("user", JSON.stringify(user));

객체를 다시 가져올 때는 JSON.parse()로 변환해야 합니다.

const storedUser = JSON.parse(localStorage.getItem("user"));
console.log(storedUser.name);  // "홍길동"

4. 데이터 삭제하기

localStorage.removeItem("username"); // 특정 데이터 삭제
localStorage.clear(); // 모든 데이터 삭제

---

04

웹 스토리지를 활용한 React 상태 관리

React에서는 useReducer를 활용하여 웹 스토리지를 적용할 수 있습니다.
아래와 같이 일기 데이터를 로컬 스토리지에 저장하고 불러오는 방식을 구현할 수 있습니다.

function reducer(state, action) {
  let nextState;

  switch (action.type) {
    case "INIT": {
      return action.data;
    }
    case "CREATE": {
      nextState = [...state, action.data];
      break;
    }
    case "UPDATE": {
      nextState = state.map((item) =>
        String(item.id) === String(action.data.id) ? action.data : item
      );
      break;
    }
    case "DELETE": {
      nextState = state.filter((item) => item.id !== action.targetId);
      break;
    }
    default:
      return state;
  }

  // 변경된 상태를 로컬 스토리지에 저장
  localStorage.setItem("diary", JSON.stringify(nextState));

  return nextState;
}

---

05

웹 스토리지를 React에서 적용하는 방법

React에서 웹 스토리지를 적용할 때, 처음 앱이 실행될 때 로컬 스토리지에서 데이터를 불러와야 합니다.

1. 로컬 스토리지에서 데이터 불러오기

이렇게 하면 페이지를 새로고침해도 기존 데이터가 유지됩니다.

useEffect(() => {
  const storedData = localStorage.getItem("diary");
  if (!storedData) return;

  const parsedData = JSON.parse(storedData);
  if (!Array.isArray(parsedData)) return;

  dispatch({ type: "INIT", data: parsedData });
}, []);

---

06

로딩 화면 추가하기 (데이터가 로드되기 전에 렌더링 방지)

웹 스토리지에서 데이터를 불러오는 과정에서, useEffect가 실행되기 전에 컴포넌트가 렌더링되면 문제가 발생할 수 있습니다.
이를 방지하려면 로딩 상태(isLoading)를 추가하여, 데이터가 로드될 때까지 로딩 화면을 보여주면 됩니다.

const [isLoading, setIsLoading] = useState(true);

useEffect(() => {
  const storedData = localStorage.getItem("diary");
  if (!storedData) {
    setIsLoading(false);
    return;
  }

  const parsedData = JSON.parse(storedData);
  if (!Array.isArray(parsedData)) {
    setIsLoading(false);
    return;
  }

  dispatch({ type: "INIT", data: parsedData });
  setIsLoading(false);
}, []);

 

그리고 로딩 상태가 true일 때는 로딩 화면을 먼저 보여줍니다.

if (isLoading) {
  return <div>로딩 중...</div>;
}

 

이렇게 하면 데이터가 완전히 로드된 후에만 화면이 렌더링되므로, 오류를 방지할 수 있습니다.

---

07

마무리

✅  정리 

• 웹 스토리지는 브라우저에 데이터를 저장하는 기능으로, 새로고침해도 데이터가 유지될 수 있음
• 로컬 스토리지(LocalStorage)는 데이터를 영구 보관, 세션 스토리지(SessionStorage)는 브라우저 탭을 닫으면 삭제됨
• React에서 useReducer와 useEffect를 활용하면, 로컬 스토리지를 쉽게 상태 관리에 적용할 수 있음
• 데이터 로딩 전에 로딩 상태를 추가하면 렌더링 오류를 방지할 수 있음

 

 

웹 스토리지는 간단한 데이터 저장 용도로 매우 유용한 기능입니다.
Firebase나 MongoDB 같은 데이터베이스를 사용하기 전에 간단한 상태 저장이 필요할 때 웹 스토리지를 적극 활용하면 좋습니다!