리액트 강좌: 웹 스토리지 이용하기

웹 애플리케이션을 개발할 때, 사용자 데이터를 클라이언트 측에 저장하고 관리하는 것은 매우 중요합니다.
이 강좌에서는 리액트 애플리케이션에서 웹 스토리지(Web Storage)를 활용하는 방법에 대해 알아보겠습니다.
웹 스토리지는 두 가지 주요 방식, 즉 세션 스토리지와 로컬 스토리지를 통해 구현됩니다.

웹 스토리지란?

웹 스토리지는 클라이언트 측에서 데이터를 저장할 수 있는 방법을 제공합니다.
이는 브라우저가 제공하는 간단한 API로, 서버에 요청하지 않고도 데이터를 저장하고 읽을 수 있게 합니다.
웹 스토리지는 다음과 같은 두 가지 주요 종류가 있습니다.

로컬 스토리지(Local Storage): 사용자가 웹 애플리케이션을 사용하더라도 데이터가 지속적으로 저장됩니다. 데이터는 브라우저의 세션이 종료되더라도 계속 유지됩니다.
세션 스토리지(Session Storage): 데이터는 브라우저 탭 또는 윈도우의 세션이 지속되는 동안만 유지됩니다. 탭을 닫거나 브라우저를 종료하면 데이터는 사라집니다.

리액트에서 웹 스토리지 사용하기

리액트에서 웹 스토리지를 사용하는 것은 매우 쉽습니다. 여기서는 간단한 예제를 통해 로컬 스토리지와 세션 스토리지를 사용하는 방법을 보여드리겠습니다.

1. 로컬 스토리지 사용하기

로컬 스토리지를 사용하여 데이터를 저장하고 불러오는 간단한 컴포넌트를 만들어 보겠습니다.


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

const LocalStorageExample = () => {
    const [name, setName] = useState('');

    useEffect(() => {
        const storedName = localStorage.getItem('name');
        if (storedName) {
            setName(storedName);
        }
    }, []);

    const handleChange = (event) => {
        const newName = event.target.value;
        setName(newName);
        localStorage.setItem('name', newName);
    };

    return (
        
            로컬 스토리지 예제
            
            저장된 이름: {name}
        
    );
};

export default LocalStorageExample;

위의 코드에서 우리는 사용자의 이름을 입력받아 로컬 스토리지에 저장하고, 페이지를 다시 로딩할 때 저장된 이름을 불러옵니다.
useEffect 훅을 사용하여 컴포넌트가 마운트될 때 로컬 스토리지에서 데이터를 읽어오는 작업을 수행합니다.

2. 세션 스토리지 사용하기

다음으로 세션 스토리지를 사용하여 데이터 저장 및 불러오기 예제를 만들어 보겠습니다.


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

const SessionStorageExample = () => {
    const [sessionData, setSessionData] = useState('');

    useEffect(() => {
        const storedData = sessionStorage.getItem('sessionData');
        if (storedData) {
            setSessionData(storedData);
        }
    }, []);

    const handleChange = (event) => {
        const newData = event.target.value;
        setSessionData(newData);
        sessionStorage.setItem('sessionData', newData);
    };

    return (
        
            세션 스토리지 예제
            
            저장된 데이터: {sessionData}
        
    );
};

export default SessionStorageExample;

세션 스토리지를 활용한 예제로, 사용자의 입력 데이터를 브라우저 세션 동안 유지할 수 있습니다.
세션이 종료되면 데이터는 자동으로 삭제됩니다. 이와 같은 기능은 장바구니 및 임시 저장의 경우 유용합니다.

웹 스토리지 API

웹 스토리지를 다룰 때는 다음과 같은 API를 사용하게 됩니다:

setItem(key, value): 지정된 키에 대해 값을 저장합니다.
getItem(key): 지정된 키에 대한 값을 반환합니다. 키가 없으면 null을 반환합니다.
removeItem(key): 지정된 키로 저장된 값을 삭제합니다.
clear(): 모든 저장된 데이터를 삭제합니다.
key(index): 지정된 인덱스의 키를 반환합니다.
length: 저장된 데이터의 개수를 반환합니다.

웹 스토리지의 장단점

웹 스토리를 사용할 때의 장점과 단점을 살펴보겠습니다.

장점

쉬운 사용: 웹 스토리지는 사용하기 매우 쉽습니다. 복잡한 설정 없이 데이터를 저장하고 읽을 수 있습니다.
비동기 처리 필요 없음: 서버 요청 없이 데이터를 즉시 저장하고 불러올 수 있습니다.
스루풋: 데이터 읽기 및 쓰기 성능이 뛰납니다.

단점

저장 용량 제한: 로컬 스토리지는 각 도메인당 약 5MB로 제한됩니다.
보안 문제: 민감한 정보를 저장할 때는 주의가 필요합니다. 클라이언트 측에서 저장된 데이터는 쉽게 접근할 수 있으므로 개인정보 보호에 유의해야 합니다.
브라우저 의존성: 사용자가 사용하는 브라우저에 따라 웹 스토리지의 동작이 다를 수 있습니다.

웹 스토리지 활용 사례

웹 스토리지는 다양한 상황에서 유용하게 사용될 수 있습니다. 다음은 일반적인 활용 사례입니다.

사용자 선호 설정: 사용자가 선택한 테마나 언어 설정 등을 저장하여 다음 로그인 시에도 동일한 환경을 제공할 수 있습니다.
장바구니 기능: 온라인 쇼핑몰에서 장바구니에 담은 상품을 로컬 스토리지에 저장하여 사용자가 헤어날 때까지 데이터를 유지할 수 있습니다.
임시 저장: 사용자 입력 폼에서 데이터를 로컬 스토리지에 저장하여 사용자가 페이지를 떠나더라도 데이터를 잃지 않도록 할 수 있습니다.

결론

웹 스토리지는 리액트 애플리케이션에서 데이터를 클라이언트 측에 저장하고 관리하는데 유용한 도구입니다.
이 강좌를 통해 로컬 스토리지와 세션 스토리지의 기본적인 사용법을 익히고, 다양한 활용 사례를 알아보았습니다.
앞으로의 프로젝트에서 웹 스토리지를 활용해보세요!