1. 알아야 할 내용

---

1) Window.localStorage

• 웹 스토리지는 오직 문자열(String) 타입만 지원하기 때문에 JSON.stringify() 함수로 JSON(문자열) 타입으로 변경해주고, 읽기 전에 JSON.parse() 함수로 다시 객체로 변경 해주어야 한다.

기본 문법

// 데이터 읽기
localStorage.getItem('key');
// 데이터 추가
localStorage.setItem('key', 'value');
// 데이터 삭제
localStorage.removeItem('key');
// 데이터 전체 삭제
localStorage.clear();

• localStorage에 setItem으로 객체나 배열의 데이터를 추가할 때는 JSON.stringify()을 이용하여 문자열로 넣어주고, getItem으로 데이터를 불러올 때는 JSON.parse()로 다시 객체로 변경시켜서 꺼낸다.

• 아래의 코드는 useEffect()를 사용하여 로컬 스토리지에 data가 저장(추가) 될 때마다 로컬 스토리지에 저장되어 있는 데이터로 업데이트(재렌더링) 된다.

  useEffect(() => {
    // data(상태)가 변경될 때마다 data를 로컬 스토리지에 저장한다.
    // 'localData'는 key 값이다.
    window.localStorage.setItem('localData', JSON.stringify(data))
  }, [data])

• state의 초기값(data)은 로컬 스토리지에 저장되어 있는 값이다.

  const [data, setData] = useState(() =>
    // localStorage에서 localData를 불러오고 localData가 없다면 dummydata를 불러온다.
    JSON.parse(window.localStorage.getItem('localData')) || dummyData
  );

2) 커스텀 훅 함수로 추출하여 재사용하기

• 여러 컴포넌트에서 로컬 스토리지가 필요하다면 커스텀 훅 함수로 추출해서 중복되는 코드를 줄일 수 있다.

import { useState, useEffect } from "react";

function useLocalStorage(key, initialState) {
  const [state, setState] = useState(
    () => JSON.parse(window.localStorage.getItem(key)) || initialState
  );

  useEffect(() => {
    window.localStorage.setItem(key, JSON.stringify(state));
  }, [key, state]);

  return [state, setState];
}

export default useLocalStorage;

2. 전체 코드

---

// App.js
import React, { useState, useEffect } from 'react';
import './App.css'
import dummyData from './dummyData'

function App() {
  // localStorage
  const [data, setData] = useState(() =>
    // localStorage에서 localData를 불러오고 localData가 없다면 dummydata를 불러온다.
    JSON.parse(window.localStorage.getItem('localData')) || dummyData
  );

  useEffect(() => {
    // data(상태)가 변경될 때마다 data를 로컬 스토리지에 저장한다.
    window.localStorage.setItem('localData', JSON.stringify(data))
  }, [data])

  const [message, setMessage] = useState('');

  // 데이터 추가
  const addMessage = () => {
    const newMessage = {
      id: data.length + 1,
      text: message,
    };
    // 기존의 데이터에 새로 입력한 데이터를 상단에 추가
    setData([newMessage, ...data]);
    // 데이터를 추가한 후 입력창 비우기
    return setMessage('');
  };

  // 데이터 삭제
  const deleteMessage = (id) => {
    setData(data.filter((value) => value.id !== id));
  }

  const handleChangeMessage = (event) => {
    setMessage(event.target.value)
  };

  return (
    <div className='inputContainer'>
      <input type='text' value={message} onChange={handleChangeMessage} />
      <button onClick={addMessage}>추가</button>
      <ul>
        {data.map((value) =>
          <li key={value.id}>
            {value.text}
            <button onClick={() => deleteMessage(value.id)}>삭제</button>
          </li>
        )}
      </ul>
    </div>
  );
}

export default App;