📂 투데이 핫브레인 주제

H.wang(황유림)의 localStorage 완벽 해부학

@아티클 영감 얻은 moment:

localStorage는 <새로고침 속>에서도 살아남는 리액트의 기억 저장소.

출처: yurimidaH’s [Week4 멤버조회 API 과제]

//[핵심코드1]: 로그인 정보 저장
localStorage.setItem('userId', String(loginUserId));
localStorage.setItem('loginId', id);
localStorage.setItem('userName', name);
localStorage.setItem('userPart', part);

//[핵심코드2]: 저장된 정보 다시 불러오기
const storedUserId = localStorage.getItem('userId');
const storedName = localStorage.getItem('userName');
const storedPart = localStorage.getItem('userPart');

//[핵심코드3]: 서버실패? fallback 데이터사용
const fallbackData = {
  loginId: storedLoginId || storedUserId,
  part: storedPart || '',
  name: storedName || '',
};

이번 API연동과제를 진행하다보니.. 저는 localStorage라는 존재의 등장으로 심히 불안정했습니다.

분명 로그인도 성공했고? 화면에도 이름이 잘 보였는데?...

새로고침 한 번 하자마자 suddenly 이름이 사라지고/ part값이 증발하며/ 헤더에는 공허한 빈칸만이 저를 반기고있었기 때문입니다.

도대체 localStorage는 뭐길래 저를 이렇게 울고웃게 만드는 걸까요?

01. Intro: 변수면 변수지, 왜 굳이 저장까지 해야 할까?

우리가 자바스크립트에서 쓰는 일반 변수들은 새로고침을 하는 순간 모두 증발합니다. 리액트 state 또한 마찬가지입니다.

즉:

const [name, setName] = useState('');

로 저장을 하더라도 브라우저를 새로고침하면 기억을 잃어버립니다.

하지만 사용자 입장에서는:

• 로그인 유지