📌 로컬스토리지를 사용하는 경우
리액트를 새로고침을 하면 모든 html, css, js가 날아감으로 state 데이터가 초기값으로 돌아가는것을 볼수있다.
이때 우리가 재접속을 하더라도 state가 남아있도록 하고자 할때 어떻게 해야할까 ?
state를 서버로 보내어 DB에 영구적으로 저장하고 필요할때 DB에서 가져올수있는 방법이 있지만 다른방법으로는 localStorage라는 저장공간을 이용하여 서버 필요없이 반 영구적으로 저장할수가 있다.
브라우저 안에서 우리는 localStorage를 확인할수있다.
바로 개발자도구의 Application 탭에서 확인이 가능하다. 
📌 로컬스토리지 특징
localStorage의 특징
1) key: value 형태로 저장이 가능
2) 문자만 저장이 가능 (최대 5MB까지)
3) 유저가 브라우저를 청소하지 않는 이상 데이터가 영구적으로 저장되어있음
📌 로컬스토리지 형태
데이터 저장은 localStorage.setItem('키','값')
localStorage.setItem('age', '20')
// 데이터를 저장하고자 할때 localStorage.setItem('key','value')
localStorage.getItem('age')
// 데이터를 출력하고자 할때 localStorage.getItem(key) - value 읽어 오기
localStorage.removeItem(age);
// 데이터를 삭제하고자 할때 localStorage.removeItem(key) - item 삭제array / object 형태의 데이터
로컬스토리지에는 문자만 저장이 가능하기에 array/object 형태 데이터는 깨진다.
그래서 편법이 하나있는데 stringify 함수를 사용하는것이다.
JSON.stringify(), JSON.parse()
array/object → JSON으로 변환하는 방법인데 JSON은 문자취급을 받기 때문이다.
stringify() 함수를 통해 변환 가능하다.
( JSON은 그냥 따옴표친 array/object 자료라 생각하면 됨 )
JSON -> array/object 변환할때는 JSON.parse() 함수를 통해 가능하다.
,