피드백 받은 개인과제 리팩토링을 진행했다.
처음에 id를 그냥 배열의 길이 title.length 로 넣었는데, 이러면 todo가 2개가 있을 경우 삭제후 새로 추가한 todo와 두번째 todo의 id가 겹칠 수 있다고 하셨다.
튜터님이 Uuid를 사용해서 고유 id값을 만드는 방법이 있다고 하셔서 찾아보았다.
uuid란?
리액트에서 사용하는 라이브러리로 고유한 id값을 자동으로 추가 해준다.
install
npm install uuid // npm 사용시
yarn add uuid // yarn 사용시 import
import { v4 as uuidv4 } from 'uuid';이 코드를 상단에 추가해준다.
필요한 곳에 호출
uuidv4()고유한 key가 필요한 곳에 넣어주면 된다.
나는 이렇게 넣어주었다.
const newTodo = {
id: uuidv4(),
title: title,
content: content,
isDone: false
};왜 사용할까?
보통은 이렇게 {{user1}, {user2}} 배열안에 객체의 형태로 user 정보를 보관한다.
배열이 고정적이라면 문제가 없지만 user를 추가 삭제하는 경우에는 동적인 배열을 랜더링해줘야한다.
리액트에서는 배열을 렌더링 할때 고유한 값을 부여해줘야 에러가 발생하지 않는다.
왜?
고유한 id나 key값을 주지 않으면 하나만 수정해도 순서가 바뀌너 값이 변경되는 문제가 있다.
하지만 고유한 id가 있다면 배열중 하나가 변경이 되어도 고유한 id값을 기억하기 때문에 효율적인 관리가 가능하다.
고유한 key값을 만들어줘도 되지만, uuid를 이용하면 조금 더 편리하게 만들수 있다.
개인과제 - todolist 만들기 회고
전반적으로 만족스러운 작업이었다! css도 생각보다 잘 나왔고, 코드 짜는것도 쉽게 했어서 만족스러웠다.
리팩토링 과정 중에서, 튜터님의 피드백 뿐만 아니라 영상을 보고 수정하는 것도 있는데 나는 애초에 컴포넌트를 분리하지 않고 하나의 파일에 몰아서 작업해서 컴포넌트를 분리해였더니 에러가 나오거나 or 제대로 동작을 하지 않았다.
그래서 일단 컴포넌트를 분리하지 않고 진행했고, git 레포를 하나 더 파서 영상에 나온대로 만들어볼 예정이다.
