useLocalStorage

LocalStorage는 key와 value로 이루어진 데이터를 저장할 수 있는 웹 스토리지 입니다. 개발자 도구를 열어 “애플리케이션” 탭으로 들어가 접근이 가능하며, LocalStorage는 해당 브라우저를 닫더라도 데이터가 계속해서 유지되는 특성이 있습니다. 이러한 특성으로 인해 로그인 상태를 유지하는 기능을 구현하기도 합니다.

이러한 LocalStorage는 react-use의 useLocalStorage를 사용하여 좀 더 간편하게 관리 할 수 있는데 간단하게 useLocalStorage 의 형태와 사용 예제에 대해 알아보도록 하겠습니다.


const [value, setValue, removeValue] = useLocalStorage("key값", "기본값");

useLocalStorage는 위와 같이 useState와 비슷한 형태를 띄는데 먼저 value는 LocalStorage의 value값이 들어가고 setValue는 value를 바꾸어주는 역할을 하는 콜백함수이며, removeValue는 LocalStorage에 있는 값을 비워주는 역할을 하는 콜백함수 입니다. useLocalStorage 의 첫 번째 인자는 LocalStorage의 key값이 들어가고 두 번째 인자는 LocalStorage의 값이 비어있다면 초기로 세팅해줄 값을 적어주는데 이는 적어주어도 되고 적어주지 않아도 되는 옵션값입니다.


import { useLocalStorage } from "react-use";

const App = () => {
  const [value, setValue, removeValue] = useLocalStorage("키", "기본값");

  return (
    <div>
      <div>
        <h1>Value: {value}</h1>
        <button onClick={() => setValue("포도")}>value를 포도로 변경</button>
        <br></br>
        <button onClick={() => setValue("바나나")}>value를 바나나로 변경</button>
        <br></br>
        <button onClick={() => removeValue()}>LocalStorage의 값을 삭제</button>
        <br></br>
      </div>
    </div>
  );
};

export default App;

useLocalStorage 훅 사용 예제

예제와 같이 코드를 작성하면 위와 같이 셋팅이 되어지는데 useLocalStorage 의 두 번째 인자에 “기본값” 이라고 적어주었기 때문에 초기의 LocalStorage의 값이 “기본값”으로 설정되어 있는 것을 확인할 수 있습니다. 또한 버튼을 클릭하여 value를 바꾸어주게 되면

위의 이미지와 같이 LocalStorage에 있던 “기본값”이 포도가 된 걸 확인할 수 있으며 이에따라 화면에 렌더링 되던 “기본값”이라는 텍스트 또한 “포도”로 바뀐 것을 확인할 수 있습니다. 또한 LocalStorage의 값을 삭제하는 버튼을 클릭하게되면

위와 같이 LocalStorage의 key와 value가 모두 삭제된 것을 확인할 수 있고 이에따라 화면에 렌더링 되어지는 Value값 또한 지워지는 것을 확인할 수 있습니다.

이처럼 useLocalStorage 을 활용한다면 LocalStorage의 값을 추가하고, 삭제하고, 변경하는 것을 좀 더 간편하게 할 수 있습니다.