그 동안 리액트로 작업해 온 작업물들은 새로고침을 하거나 재접속을 하면
사이트가 초기화되었다.
새로고침을 하면 JS 파일도 처음부터 다시 읽어오기 때문이다.
(웹브라우저의 동작 원리를 공부 안했으면 이해 못했을 듯)

그렇다면 내가 만들어 놓은 데이터를 기억하게 하려면 어떤 방법을 사용해야 할까?

일반적으로는 내가 만든 state를 서버에 보내서 DB에 저장하는 방법을 사용하겠지만
나의 경우에는 서버가 없으니 브라우저 저장 공간에 저장하는 방법을 택했다.

1. localStorage 사용

session storage를 사용하지 않은 이유는 휘발성이 있기 때문이다.
데이터를 저장하면 인터넷 기록을 전부 지워버리지 않는 이상 localstorage에 있는
데이터는 남아있지만, sessionstorage 같은 경우는 인터넷 브라우저를 종료하면
데이터가 전부 휘발되어 버리기 때문이다.

이 localstorage를 사용해주기 위해서는 단 3개의 문법만 알면 된다.

1. 자료 저장 : localStorage.setItem(key,value);

2. 자료 출력 : localStorage.getItem(key);

3. 자료 삭제 : localStorage.removeItem(key);

자 이제 끝!

이라고 하기엔 아직 알아야 하는 것이 있다.

---

2. localStorage 연습

string 형의 데이터를 setItem으로 저장 후, getItem으로 출력을 했을 때
정상적으로 나오는 걸 볼 수 있다.
하지만 object형을 출력을 했을 땐 어떻게 나올지 궁금했다.

object object라고 나오는 것을 볼 수 있다.
localStorage에 object형을 바로 저장하려고 하면 object 데이터가
깨진다는 것이 이유였는데, localStorage와 sessionStorage는
"string"과 number 데이터만 저장할 수 있다는 특징이 있다.

object 데이터를 손실 없이 저장하는 방법

JSON 형태로 저장해주면 해결할 수 있다.

JSON.stringify라는 메서드를 사용해 JSON 형태의 데이터로 만들어
localStorage에 저장을 하면 정상적으로 데이터가 저장된다.

저장한 object 데이터를 가져오는 방법

하지만 데이터를 출력했을 때도 JSON 형태로 출력이 되는데, JSON 형태의 데이터에서는
object에서 데이터를 가져오는 것 처럼 사용할 수 없다.

일반 object에서 데이터를 가져오는 것 처럼 시도했을 때, undifined라는 데이터가
출력되는 것을 볼 수 있다.

여기서 시도할 수 있는 것은 JSON.parse이다.
JSON.parse를 사용하면 기존의 JSON 형식으로 작성되었던 데이터가
다시 object 형으로 변환된다.