바쁜 휴일에도 React 배우기 – useEffect로 Local Storage에 데이터 저장

Source: Dev.to

React와 함께 localStorage를 사용하는 이유

React를 처음 시작하면 많은 예제가 일시적이라는 느낌을 받습니다. 페이지를 새로 고치면 모든 것이 사라지죠. 실제 애플리케이션에서는 다음과 같은 데이터를 지속시켜야 합니다:

• 사용자 환경 설정
• 테마 설정
• 시청한 영화 목록
• 장바구니 아이템
• 폼 초안

localStorage는 브라우저가 페이지 리로드나 브라우저 재시작 후에도 데이터를 영구적으로 저장하도록 해줍니다.

State vs. localStorage

• React state는 메모리(임시) 안에 존재합니다.
• localStorage는 브라우저에 영구적으로 저장됩니다.

목표는 state를 대체하는 것이 아니라 state와 localStorage를 동기화하는 것입니다. localStorage에서 먼저 읽어오면 하드코딩된 기본값을 피할 수 있습니다.

localStorage에서 State 초기화하기

상태 초기화 콜백 함수를 사용하면 최초 렌더링 시에만 읽기가 수행됩니다:

import { useState } from "react";

const [items, setItems] = useState(() => {
  const stored = localStorage.getItem("items");
  return stored ? JSON.parse(stored) : [];
});

왜 중요한가

• 함수가 한 번만 실행돼 매 렌더링마다 불필요한 읽기를 방지합니다.
• 앱이 저장된 데이터를 자동으로 로드합니다.

useEffect로 localStorage와 동기화하기

state가 변경될 때마다 localStorage를 업데이트하고 싶습니다. useEffect는 렌더링 후에 실행되며, 의존성 배열을 통해 지정된 state가 바뀔 때만 실행됩니다.

import { useEffect } from "react";

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

핵심 포인트

• useEffect는 컴포넌트가 렌더링된 뒤 실행됩니다.
• 의존성 배열([items])은 items가 변할 때만 효과가 실행되도록 보장합니다.
• 이를 통해 브라우저 저장소가 항상 최신 상태를 유지합니다.

데이터 타입 다루기

localStorage는 문자열만 저장합니다. 따라서:

• 객체 → JSON.stringify(obj)
• 배열 → JSON.stringify(arr)
• 다시 읽을 때 → JSON.parse(storedString)

문자열화/파싱을 빼먹으면 미묘한 버그가 발생합니다.

정리

• localStorage로 데이터를 영구히 저장하는 습관은 실제 React 개발에서 작지만 필수적인 요소입니다.
• 상태 초기화 콜백을 사용해 localStorage를 한 번만 읽어옵니다.
• 상태가 바뀔 때마다 useEffect를 통해 localStorage와 동기화합니다.
• 저장하기 전에는 항상 문자열화하고, 가져올 때는 파싱합니다.

이 패턴들을 적용하면 React 앱이 실제 사용자 행동과 페이지 리로드를 견디며, 바쁜 날에도 작업 흐름을 유지할 수 있습니다.