로컬스토리지에 데이터를 저장하는 방법

장바구니나, 투두리스트 등을 state로 상태관리를 하다보면 새로고침할 때 데이터가 전부 사라진다. 데이터를 유지하기 위해서는 데이터를 저장하는 곳이 필요함을 느꼈다. 

 

대표적인 방법으로는 쿠키와 로컬스토리지가 있다.

이 둘의 차이점은 무엇일까?

 

우선 쿠키는  최대 4KB의 용량을 가진 작은 데이터이다. 사이트에서 방문한 페이지를 저장하거나 유저의 로그인 정보를 저장하는 등 다양한 방법으로 사용되고, 문자열만 저장할 수 있다는 제한이 있다.  사이트에서 제한된 인터넷 사용 기록을 기반으로 사용자 경험을 개선하는 것이다.

 

쿠키에는 크게 두가지의 종류가 있다.

• Seesion cookies: 만료일이 없고, 브라우저나 탭이 열려있을 때만 저장되며 브라우저가 닫히면 cookies는 영구적으로 삭제된다. 
• Persistent cookies: 만료일이 있고, 만료일까지 유저의 디스크에 저장되고 만료일이 지나면 삭제된다.

 

로컬스토리지는 쿠키와 달리 모든 HTTP 요청에서 데이터를 주고받을 필요가 없다. HTTP 요청에서 데이터를 주고받지 않고 로컬스토리지를 이용하면 클라이언트와 서버간의 전체 트래픽과 낭비되는 대역폭의 양을 줄일 수 있다. 데이터가 유저의 로컬 디스크에 저장되어 있으면 인터넷이 끊어져도 데이터가 삭제되거나 지워지지 않기 때문이다. 만료 기간이 따로 없으며 수동으로 지우지 않는 한 데이터가 브라우저에 영구적으로 저장된다. 또한 쿠키보다 더 큰 용량인 최대 5MB의 정보를 저장할 수 있다.

 

LocalStorage 사용방법

localStorage.setItem(‘Key’,’Value’)

데이터를 저장하는 방벙으로는 키와 값을 인자로 넣어준다.

 

사용자가 로그인을 했는지 저장하도록 만들어보기로 했다.

localStorage.setItem('isLoggedIn', '1');

우선 로컬스토리지에 'isLoggedIn'라고 식별자를 넣어주고 로그인을 했다는 의미로 값은 1, 로그인을 하지 않았을 때 0으로 생각해서 1을 넣어주었고 문자열이어야하기 때문에 ''으로 감싸주었다.

 

사용자가 페이지를 나갔다가 다시 돌아오거나 새로고침을 하는 경우 로컬 저장소에 있는지 확인해야 한다.

검사 → 애플리케이션에 들어간다.

 

로컬스토리지에 가면 키와 값이 저장되어 있는것을 확인할 수 있다.

 

const storedUserLoggedInformation = localStorage.getItem('isLoggedIn');
  
if(storedUserLoggedInformation === 1) {
  setIsLoggedIn(true)
}

사용자를 로그인 상태로 설정할 수 있다.

 

하지만 이 방식은 무한 루프를 생성할 수 있다.

storedUserLoggedInformation이 1로 되어있는지, 즉 로그인 된 정보가 메모리상에 저장이 돼있는지 확인하고 저장이 되어 있으면 true로 설정한다. 그리고 state함수가 호출될때마다 컴포넌트 함수는 다시 실행된다. 다시 1인지 체크하고, 이 상황이 무한 반복이 된다.

 

무한루프를 막기위해 useEffect를 사용한다.

useEffect(() => {
    const storedUserLoggedInformation = localStorage.getItem('isLoggedIn');

    if (storedUserLoggedInformation === 1) {
      setIsLoggedIn(true);
    }
}, []);

useEffect는 컴포넌트 함수가 실행이 된 후에 실행이 되고, stat가 업데이트가 되면 컴포넌트가 다시 실행된다. 처음 앱이 시작될 때 한번만 실행되길 원하는데 이는 원하는 대로 작동이 된다.

 

앱이 시작되면 useEffect가 실행이 되고 → setIsLoggedIn state가 업데이트가 되고 → 컴포넌트 함수가 다시 실행되도록 트리거가 된다.

 

따라서 전부 다시 실행이 되고 DOM이 업데이트 된다. 그 후에 useEffect가 실행이 되는데 의존성 배열이 변경된 후에만 다시 실행이 된다.

 

수동으로 로컬 스토리지에서 값을 지우고 새로고침을 하면 로그인이 해제된다. useEffect가 실행이됐고, state가 1이 아니기 때문에 로그인 정보를 찾지 못했기 때문이다.

 

여기서 데이터 가져오기는 사이드 이펙트이다.

 

const logoutHandler = () => {
    localStorage.removeItem('isLoggedIn')
    setIsLoggedIn(false);
};

로그아웃할 때도 로컬스토리지를 연결해서 데이터를 지워주면 수동으로 지우지 않아도 로그아웃 처리가 된다.