[React] LocalStorage(로컬스토리지) - 저장, 불러오기, 삭제

로컬 스토리지란?

로컬스토리지는 브라우저에 정보를 저장하는 기능입니다.
예를 들어, 내가 입력한 데이터를 새로고침해도 남아있게 하고 싶을 때 사용할 수 있습니다.
내 컴퓨터 브라우저에 데이터를 저장하는 상자라고 생각할 수 있습니다.

• 브라우저를 껐다 켜도 데이터가 존재합니다.
• 문자(문자열)만 저장할 수 있습니다.
• 로그인 정보, 테마 설정, 임시 데이터 저장 등에 사용합니다.
• 로컬스토리지는 문자(문자열)만 저장할 수 있습니다.

그러나, 우리가 사용하는 객체나 배열은 문자열이 아니기 때문에 바로 저장할 수 없으므로

저장할 때는 JSON.stringify()로 문자열로 바꿔서 저장하고

불러올 때는 JSON.parse()로 다시 원래 객체/배열로 변환해야 합니다.

 

로컬스토리지 사용법

1. 데이터 저장하기

// 'username'이라는 이름으로 '김강현' 저장
localStorage.setItem('username', '김강현');

2. 데이터 불러오기

// 'username'이라는 이름의 데이터 꺼내오기
const name = localStorage.getItem('username');
console.log(name); // '김강현'

3. 데이터 삭제하기

// 'username' 데이터 삭제
localStorage.removeItem('username');

4. 객체 저장 & 불러오기

// 객체를 문자열로 변환해서 저장
const user = { name: '김강현', age: 30 };
localStorage.setItem('user', JSON.stringify(user));

// 저장된 데이터는 실제로 이렇게 보입니다:
// '{"name":"김강현","age":30}'

// 불러올 때는 다시 객체로 변환
const savedUser = JSON.parse(localStorage.getItem('user'));
console.log(savedUser.name); // '김강현'
console.log(savedUser.age);  // 30

5. 배열 저장 & 불러오기

// 배열을 문자열로 변환해서 저장
const fruits = ['사과', '바나나', '포도'];
localStorage.setItem('fruits', JSON.stringify(fruits));

// 불러올 때는 다시 배열로 변환
const savedFruits = JSON.parse(localStorage.getItem('fruits'));
console.log(savedFruits[0]); // '사과'

---

정리

• 로컬스토리지는 브라우저에 간단한 정보를 저장할 때 사용합니다.
• 문자열만 저장 가능하므로 객체/배열은 JSON.stringify와 JSON.parse를 꼭 사용해야 합니다.
• 새로고침이나 브라우저를 껐다 켜도 데이터가 남아있어서 편리합니다.
• 브라우저에 데이터가 존재하므로 중요한 개인정보(비밀번호, 토큰 등)등의 저장에 주의해야 합니다.

리액트에서는 useEffect와 useState를 활용해 로컬스토리지와 상태를 연동할 수 있습니다.
(입력값을 저장하고, 새로고침해도 입력값이 남아있게 만들기가 가능합니다.)