[React] localStorage 브라우저에 데이터 저장하기 (로컬스토리지)

hellow_coding·2023년 8월 27일

로컬 스토리지(Local Storage)❓

웹 브라우저에서 제공하는 클라이언트 측 데이터 저장소입니다. 이 저장소는 도메인과 관련된 작은 데이터를 사용자의 브라우저 내에 지속적으로 저장할 수 있도록 해줍니다. 로컬 스토리지는 쿠키보다 더 많은 용량을 가지며, 서버로 데이터를 전송하지 않고도 웹 애플리케이션의 상태나 사용자 정보 등을 유지할 수 있습니다.

1. 용량

:로컬 스토리지의 용량은 브라우저별로 다를 수 있지만, 일반적으로 5MB 정도의 용량을 가집니다.

2. 동일한 출처

:로컬 스토리지는 동일 출처 정책에 따라 동일한 도메인(프로토콜, 도메인, 포트) 내에서만 접근할 수 있습니다.

3. 키-값 쌍 저장

:로컬 스토리지는 키(key)와 값(value)의 쌍으로 데이터를 저장합니다. 모두 문자열 형태로 저장됩니다.

4. 세션과 관련 없음

:로컬 스토리지에 저장된 데이터는 브라우저 세션이 끝나더라도 유지됩니다.

5. 데이터 유형(문자열 형태)

:로컬 스토리지에는 문자열 형태로만 데이터를 저장할 수 있습니다. 객체나 배열과 같은 복잡한 데이터 구조는 JSON 형식으로 변환하여 저장하고 다시 파싱하여 사용해야 합니다.

6. API

:로컬 스토리지를 조작하기 위해 localStorage 객체를 사용합니다. localStorage.setItem(key, value)로 데이터를 저장하고, localStorage.getItem(key)로 데이터를 불러옵니다. localStorage.removeItem(key)로 데이터를 삭제할 수 있습니다.

로컬 스토리지는 간단한 데이터를 저장하거나 브라우저 상태를 관리하는 데 유용합니다. 예를 들어 사용자 설정, 로그인 정보, 애플리케이션 상태 등을 저장하고 유지할 수 있습니다. 하지만 보안적인 이슈에 주의해야 하며, 중요한 개인 정보나 보안에 민감한 데이터를 저장할 때는 보안 대책을 강구해야 합니다.

// 복잡한 데이터 구조 생성
const user = {
  id: 123,
  name: 'John Doe',
  email: 'john@example.com'
};

// 데이터를 문자열로 변환하여 로컬 스토리지에 저장
localStorage.setItem('user', JSON.stringify(user));

// 로컬 스토리지에서 데이터 불러오기 후 JSON 파싱
const storedUser = localStorage.getItem('user');
const parsedUser = JSON.parse(storedUser);
// 'JSON.parse()' 함수를 사용하며, 이 함수는 문자열 형태의 JSON 데이터를 JavaScript 객체로 변환 -> 객체의 속성을 통해 데이터에 접근하고 조작

console.log(parsedUser);
// 출력: { id: 123, name: 'John Doe', email: 'john@example.com' }

✔️ 할일 목록을 유지하고 관리하는 예시코드

jsx 코드

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

function TodoApp() {
  const [todos, setTodos] = useState([]);
  const [newTodo, setNewTodo] = useState('');

  useEffect(() => {
    const storedTodos = localStorage.getItem('todos');
    if (storedTodos) {
      setTodos(JSON.parse(storedTodos));
    }
  }, []);

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

  const addTodo = () => {
    if (newTodo.trim() !== '') {
      setTodos([...todos, newTodo]);
      setNewTodo('');
    }
  };

  const removeTodo = index => {
    const updatedTodos = todos.filter((_, i) => i !== index);
    setTodos(updatedTodos);
  };

  return (
    <div>
      <h1>Todo List</h1>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>
            {todo}
            <button onClick={() => removeTodo(index)}>Remove</button>
          </li>
        ))}
      </ul>
      <div>
        <input
          type="text"
          value={newTodo}
          onChange={e => setNewTodo(e.target.value)}
          placeholder="Add a new todo"
        />
        <button onClick={addTodo}>Add</button>
      </div>
    </div>
  );
}

export default TodoApp;

useState 후크를 사용하여 할일 목록(todos)과 새로운 할일을 입력받을 때 사용되는 상태(newTodo)를 관리합니다. 또한 useEffect 후크를 사용하여 페이지 로드 시 로컬 스토리지에서 데이터를 불러오고, 할일 목록이 변경될 때마다 데이터를 저장합니다.

tsx 코드

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

interface Todo {
  id: number;
  text: string;
}

function TodoApp() {
  const [todos, setTodos] = useState<Todo[]>([]);
  const [newTodo, setNewTodo] = useState<string>('');

  useEffect(() => {
    const storedTodos = localStorage.getItem('todos');
    if (storedTodos) {
      setTodos(JSON.parse(storedTodos));
    }
  }, []);

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

  const addTodo = () => {
    if (newTodo.trim() !== '') {
      const newId = todos.length > 0 ? todos[todos.length - 1].id + 1 : 1;
      const newTodoItem: Todo = { id: newId, text: newTodo };
      setTodos([...todos, newTodoItem]);
      setNewTodo('');
    }
  };

  const removeTodo = (id: number) => {
    const updatedTodos = todos.filter(todo => todo.id !== id);
    setTodos(updatedTodos);
  };

  return (
    <div>
      <h1>Todo List</h1>
      <ul>
        {todos.map(todo => (
          <li key={todo.id}>
            {todo.text}
            <button onClick={() => removeTodo(todo.id)}>Remove</button>
          </li>
        ))}
      </ul>
      <div>
        <input
          type="text"
          value={newTodo}
          onChange={e => setNewTodo(e.target.value)}
          placeholder="Add a new todo"
        />
        <button onClick={addTodo}>Add</button>
      </div>
    </div>
  );
}

export default TodoApp;