캘린더 클론코딩 - todoList 저장고에 저장하고 꺼내오기

<개요>

앱을 나왔다가 다시 들어가도 내가 일전에 적었던 todoList는 그대로 저장되어 있어야 한다. 

그걸 구현하기 위해 Stroage란 DB를 사용하여 프로그램이 랜더링 되고 있는 상황에서 update 시 바로 DB에 update 결과를 저장시켜 주도록한다. 

그리고 프로그램이 다시 시작될 때, 해당 DB에서 내용물을 꺼내 오도록 한다. 

1. 로직

2. 코드 리뷰

AsyncStorage - Expo Documentation

AsyncStorage

먼저 여기서 AsyncStorage 깔기. 

제대로 구동되려면, 설치하고 VS code 껐다가 켜야함. 

먼저 전역변수로 TODO_LIST_KEY라는 것을 만들었는데, 이는 addTodo, removeTodo, toggleTodo 모두 같은 Key으로 Value를 저장하게 하기 위함이다. 

 

두 번째 밑줄의 Code는 AsyncStorage 내장함수로 .setItem("KEY", "VALUE") 형태로 저장된다.(Spring MVC에서 모델이 항상 HashMap 형태로 이루어져 있는 것과 같다.) DB안에 모든 Value는 String 형태로만 저장할 수 있기 때문에 todoList 자체를 통째로 String으로 형변환 시켜줘야 한다. 

JSON.stringfy()는 ()안의 내용물을 String으로 바꿔주는 역할을 한다. 

 

그리고 세 번째를 보면 addTodo 작업이 끝난 후에  우리가 쓰고 있는 코드 내 List 자체도 최신화 해주고 있고, Storage에도 값을 저장 시켜 최신화 시켜주고 있다. 

맨 위의 useEffect는 []안이 비어있다. 원래 useEffect는 [ ] 안의 내용이 변경 되었을 때, 첫 번째 인자의 callback 함수가 실행되는 형태이다.

[ ]안이 비어있으면 프로그램 랜더링 시작 시 처음이자 마지막으로 첫 번째 인자의 함수를 실행하겠다는 뜻이다. 

이는 java Servlet에서 전처리기의 역할을 한다. (본 프로그램 시작 전에 하는 일 처리를 전처리라 하고, 보통 프로그램에 쓰이는 내용을 준비하는 작업을 한다.)

 

init 함수는 초기화 함수로 async 함수를 이용했다. 

먼저 result라는 변수를 초기화 해주었다. 이떄 getItem을 통해 TODO_LIST_KEY란 Key 값에 해당하는 value인 todoList를 가져와 result에 대입 시켜주었다. 

하지만 result 자체를 바로 setTodoList의 인자로 넣어줄 수 없다. 

왜냐하면, setTodoList에 들어가야 하는 내용은 객체여야 하는데 result는 String이기 때문이다.

따라서 JSON.parse로 다시 한번 result를 object 타입으로 형변환 시켜주어서 setTodoList에 넣는다. 

 

console.log는 result와 newTodoList 의 타입, 내용들을 콘솔에 찍어보기 위해 쓰인 것이다.

결과는 다음과 같다. 

3. 새롭게 배운 것 - JSON 

(1) JSON이란? 

Java Script Object Notation의 약자로 자바 스크립트 객체를 표기하는 방법이다. 

JSON은 텍스트 기반의 데이터 교환 표준으로서 객체 데이터의 교환과 저장에 많이 사용된다.

JSON은 텍스트 기반이라 여러 다양한 언어에서도 JSON을 읽고 사용할 수 있다.

 

(2) JSON의 형태 

a. 기본형

JSON의 형태는 JS 내의 객체의 형태와 같다.

{key : value}

b. 심화형

value에는 모든 타입의 값들이 올 수 있다. 

// value로 올 수 있는 값

// 1. 숫자(num)
{k : 1}

// 2. 문자열
{k : "str"}

// 3. boolean
{k : true}

// 4. object
{k : {inKey : "value", inkey2 : "value2"}}

// 5. array
{k : [apple, banna, orange]}

// 6. null
{k : null}

 

value인 array 의 값들이 다 object 일수도 있다. 

{"TODO_LIST_KEY" : 
	[
    	{
        	id: 1,
            content: "운동하기",
            date: dayjs()
            isSuccess: true
        },
        
        {
        	id: 2,
            content: "밥먹기",
            date: dayjs()
            isSuccess: false
        },
        
        {
        	id: 3,
            content: "공부하기",
            date: dayjs()
            isSuccess: true
        },
    ]
}

 (3) JSON 내장 함수 

a. JSON.stringify( )

()안에 JSON 형태의 내용물을 String으로 바꿔준다. 

const JSON = {Key : Value}
const typeCasting = JSON.stringify(JSON)

// JSON의 내용이 통째로 String으로 변함 -> 내용물부터 겉까지 모든 부분이 String 화 된다.
// 예상 outPut : "{"key", "value"}"

b. JSON.parse()

 String으로 바뀌었던 JSON 형태의 내용물을 다시 Object type으로 형 변환 시켜준다. 

const JSON2 = "{"key" : "Value"}"

const typeCasting2 = JSON.parse(JSON2)

// 다시 맨 가에 붙어있던 ""가 삭제됨.

이때 JSON.parse( )안에 들어가는 String은 내용물이 JSON 문자열의 형태를 띄어야 한다.

JSON 문자열이란 위의 JSON.stringify()에 넣었을 때 처럼, 겉 표지, key, value가 모두 String으로 바뀐 상태를 말한다.  

다음과 같은 String 변수를 JSON.parse 안에 넣어주면 에러가 난다. 

const JSON3 = "그냥 string 입니다."

JSON.parse(JSON3)

// 에러가 남