0621-TIL-React Todo List 만들기

uuid

먼저 yarn add react-uuid를 통해 패키지 설치를 한 후 사용할 수 있다.

 

요소마다 구분할 수 있는 특별한 값이 필요한 경우에 사용하면 된다!

 

{
      id: uuid(),
      title: "제목1",
      contents: "내용1",
      isDone: false,
    }

 

위의 사진처럼 todo list 하나마다 삭제하거나 완료를 해야하는 상황에서

uuid()메서드를 사용하면 고유한 id값을 사용할 수 있다.

 

uuid()를 알지 못했을 때는

id : todo.length +1

이 방식으로 id값을 부여했다.

하지만 이렇게 하게 될 경우 리스트를 삭제하고 새로 추가하는 과정에서

id값이 같은 리스트가 만들어질 수 있는 오류가 있었다.

 

Spread Operator

let str = 'hello world'
let strArr = [...str]
console.log(strArr)

spread연산자를 문자열에 사용할 수도 있다!

문자를 spread한 후에 배열로 묶으면 글자 하나하나씩 배열에 담긴다.

 

const newTodos = todos.map((item) => {
                    if (todo.id === item.id) {
                      return {
                        ...item,
                        isDone: !item.isDone,
                      };
                    } else {
                      return item;
                    }

배열에 담긴 객체의 내용을 수정할 때도 spread연산자를 사용할 수 있다.

 

const todos = [
{
id : uuid(),
title : '',
contents :'',
isDone : false
},
{
id : uuid(),
title : '',
contents :'',
isDone : false
},
]

todos는 이런 형식의 배열일 때,

todos 요소들 중에 특정 요소의 isDone값만 수정하고 다시 return할 때 spread연산자를 사용할 수 있다.