React에서 폼 입력 값 로컬 저장하기

React 애플리케이션에서 사용자 입력값을 저장하고 관리하는 것은 매우 중요한 작업입니다. 특히 입력값을 로컬 스토리지(Local Storage) 또는 세션 스토리지(Session Storage)에 저장하면 사용자가 페이지를 새로 고침하거나 나갔다 돌아와도 데이터를 유지할 수 있습니다. 이를 통해 사용자는 데이터 손실에 대한 걱정을 줄이고 더 나은 사용자 경험을 누릴 수 있습니다.

이번 글에서는 React에서 폼 입력 값을 로컬 스토리지에 저장하고 불러오는 방법을 단계별로 설명하고 예제와 함께 자세히 알아보겠습니다.

---

로컬 스토리지(Local Storage)란?

로컬 스토리지는 브라우저의 저장소 중 하나로, 데이터를 키-값 형태로 저장합니다. 저장된 데이터는 브라우저를 닫아도 유지되며 만료 기한이 없습니다. 주요 특징은 다음과 같습니다:

• 용량: 약 5MB의 데이터를 저장할 수 있습니다.
• 데이터 지속성: 브라우저를 닫거나 새로고침해도 데이터가 유지됩니다.
• 형식: 문자열(String) 형태로만 저장할 수 있습니다.

React에서 로컬 스토리지를 활용하면 간단한 사용자 데이터를 클라이언트 측에 저장할 수 있습니다.

---

React에서 로컬 스토리지 사용하기

기본 개념

로컬 스토리지는 브라우저의 window.localStorage 객체를 사용해 접근합니다.

• 저장하기: localStorage.setItem(key, value)
• 불러오기: localStorage.getItem(key)
• 삭제하기: localStorage.removeItem(key)
• 모두 삭제하기: localStorage.clear()

React에서의 폼 입력값 저장 구현

아래 예제를 통해 입력 폼에서 입력된 데이터를 로컬 스토리지에 저장하고 불러오는 방법을 확인해 봅시다.

---

로컬 스토리지에 폼 값 저장하기

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

function LocalStorageForm() {
  const [inputValue, setInputValue] = useState('');

  // 컴포넌트가 마운트될 때 로컬 스토리지에서 값 불러오기
  useEffect(() => {
    const savedValue = localStorage.getItem('formInput');
    if (savedValue) {
      setInputValue(savedValue);
    }
  }, []);

  // 입력값 변경 시 상태와 로컬 스토리지 업데이트
  const handleChange = (e) => {
    const value = e.target.value;
    setInputValue(value);
    localStorage.setItem('formInput', value);
  };

  return (
    <div>
      <h2>React 폼 입력값 로컬 저장</h2>
      <input
        type="text"
        value={inputValue}
        onChange={handleChange}
        placeholder="입력하세요..."
      />
      <p>저장된 값: {inputValue}</p>
    </div>
  );
}

export default LocalStorageForm;

코드 설명

1. useEffect: 컴포넌트가 처음 렌더링될 때 로컬 스토리지에 저장된 값을 불러와 상태를 초기화합니다.
2. handleChange 함수: 입력값이 변경될 때마다 상태를 업데이트하고 동시에 로컬 스토리지에 저장합니다.
3. localStorage.setItem(): 입력값을 로컬 스토리지에 저장합니다.
4. localStorage.getItem(): 저장된 값을 가져옵니다.

---

여러 입력 필드 다루기

하나의 폼에 여러 입력 필드가 있을 경우 객체 형태로 저장하고 관리할 수 있습니다.

예제: 여러 입력 필드를 로컬 스토리지에 저장

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

function MultiFieldForm() {
  const [formValues, setFormValues] = useState({
    name: '',
    email: '',
  });

  // 저장된 폼 데이터를 불러오기
  useEffect(() => {
    const savedValues = JSON.parse(localStorage.getItem('multiForm'));
    if (savedValues) {
      setFormValues(savedValues);
    }
  }, []);

  // 입력값 변경 시 상태와 로컬 스토리지 업데이트
  const handleChange = (e) => {
    const { name, value } = e.target;
    const updatedValues = { ...formValues, [name]: value };
    setFormValues(updatedValues);
    localStorage.setItem('multiForm', JSON.stringify(updatedValues));
  };

  return (
    <div>
      <h2>여러 입력 필드 로컬 저장</h2>
      <input
        name="name"
        value={formValues.name}
        onChange={handleChange}
        placeholder="이름"
      />
      <input
        name="email"
        value={formValues.email}
        onChange={handleChange}
        placeholder="이메일"
      />
      <p>이름: {formValues.name}</p>
      <p>이메일: {formValues.email}</p>
    </div>
  );
}

export default MultiFieldForm;

코드 설명

1. 상태 객체: 여러 입력값을 하나의 객체 형태로 관리합니다.
2. JSON.stringify() 및 JSON.parse(): 객체 데이터를 로컬 스토리지에 저장하거나 불러올 때 JSON 형식으로 변환합니다.
3. handleChange: 입력 필드의 name 속성을 기반으로 상태를 업데이트합니다.

---

데이터 삭제하기

로컬 스토리지에 저장된 데이터를 삭제하고 싶을 경우 localStorage.removeItem() 또는 localStorage.clear()를 사용할 수 있습니다.

예제: 저장된 값 삭제하기

const handleClear = () => {
  localStorage.removeItem('formInput'); // 특정 항목 삭제
  setInputValue('');
};

// 모든 로컬 스토리지 데이터 삭제
localStorage.clear();

---

결론

React와 로컬 스토리지를 결합하면 사용자가 입력한 데이터를 간단하게 저장하고 관리할 수 있습니다. 특히 폼 데이터를 저장하면 페이지 새로 고침이나 브라우저를 닫아도 데이터를 유지할 수 있어 사용자 경험이 크게 향상됩니다.

위에서 다룬 예제를 참고해 간단한 로컬 저장 기능을 구현해 보고, 필요에 따라 데이터를 검증하거나 백엔드 서버와 연동하는 기능으로 확장해 보세요.