[URH-21] useLocalStorage 신규

[jeongbaebang]

👾 Pull Request

• 작업명: useLocalStorage

• 티켓: [react hooks] useLocalStorage

• 상태: 신규

1️⃣ Spec

• 로컬 스토리지를 쉽게 사용하도록 하는 hook
• key값을 받아서 해당 key에 저장되어 있는 value와 data를 해당 key에 저장하는 setter 함수를 리턴
• 서로 다른 타입의 값 처리시 경고 문구 활성

2️⃣ 변경 사항

• 변경 사항 없음

3️⃣ 예시 코드

import React from 'react';
import useLocalStorage from './hooks/useLocalStorage';

function App() {
  // 'count' 키와 초기 값 0을 사용하여 로컬 스토리지에 저장된 값을 관리
  const [count, setCount] = useLocalStorage<number>('count', 0);

  const increment = () => {
    setCount((prevCount) => prevCount + 1);
  };

  // 잘못된 타입의 값을 설정하려는 함수 (타입 에러 발생 예시)
  const wrong = () => {
    /**
     * Failed to set item in localStorage MatchError:
     * New value type does not match stored value type
     * current:20 + 1->string, prev:20->number
     */
    setCount((prevCount) => `${prevCount} + 1`); // 숫자 타입에 문자열을 할당하려고 시도함
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={wrong}>wrong</button>
    </div>
  );
}

export default App;

4️⃣ 관련 문서 (선택 사항)

• https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
• https://ko.javascript.info/localstorage

[foresec]

수고하셨습니다! 좀 더 구조화된 훅으로 작성하셨네요:)

[bicochan]

멋져요 정배 님!👍🏻✨

[Choozii]

✈️