내일배움캠프 6기 React TIL

2023.06.16

오늘의 회고

개인과제를 제출하고 react 입문 1주차가 끝났다.

개인과제

Todo List 깃허브

컴포넌트 분리

App.jsx에서 컴포넌트를 분리해 보았다.

• App
  • Layout
    • Header
    • Form
    • Main
      1. Main
      2. ToDoList
      3. DoneBtn
  • /Layout

return (
    <Layout>
      <Header />
      <Form toDoCard={toDoCard} setToDoCard={setToDoCard} />
      <Main toDoCard={toDoCard} setToDoCard={setToDoCard} />
    </Layout>
  );

components파일을 만들고 분리된 파일들을 정리해 보았다.

내가 생각한 방식으로 컴포넌트도 나누고 파일을 정리해 보았지만 이게 옳은 방식인지 모르겠다. 주말 동안 개인과제 답안 코드를 보면서 공부해보자.

카드추가 id

과제 완성 후 테스트 과정에서 생겨난 버그가 있었다.
toDoCard카드를 삭제하거나 다시 추가하는 과정에서 버그가 발생한 것 같았다. 카드를 추가면서 새로운 id를 부여해 주는 방식이 문제였다.

const addBtnHandler = (event) => {
    event.preventDefault();
    if (title !== "" && detail !== "") {
      const newToDoCard = {
        id: toDoCard.length + 1,
        title,
        detail,
        isDone: false,
      };
      setToDoCard([...toDoCard, newToDoCard]);
      setTitle("");
      setDetail("");
    }
  };

id: toDoCard.length + 1
기존 카드배열의 길이에 1을 더해 id를 부여하는 방식이다. 이전의 카드가 삭제되었을 경우 똑같은 id값을 가진 카드가 생겨나는 문제인 것 같다.

const addBtnHandler = (event) => {
    event.preventDefault();
    if (title !== "" && detail !== "") {
      const newToDoCard = {
        id: toDoCard[toDoCard.length - 1].id + 1,
        title,
        detail,
        isDone: false,
      };
      setToDoCard([...toDoCard, newToDoCard]);
      setTitle("");
      setDetail("");
    }
  };

id: toDoCard[toDoCard.length - 1].id + 1,
기존 카드배열의 마지막 카드id 값에서 1을 더하는 방법으로 교체.

UUID

과제 해설 영상에서 신기한 것을 알게 됬다. UUID!

UUID는 소프트웨어 구축에 쓰이는 식별자 표준으로, 개방 소프트웨어 재단(OSF)이 분산 컴퓨팅 환경(DCE)의 일부로 표준화하였다.

UUID를 사용하면 매번 다른 id값을 적용 할 수 있다.

UUID는 16 옥텟 (128비트)의 수이다.

550e8400-e29b-41d4-a716-446655440000

340,282,366,920,938,463,463,374,607,431,768,211,456개의 사용 가능한 UUID가 있다.
UUID위키백과

UUID를 쓰기 위해서 (yarn 사용 시) yarn add react-uuid로 모듈을 설치 하면 된다.

import uuid form 'react-uuid'

const App () => {
  consol.log(uuid());
}

setState

개인과제 리뷰영상을 보다가 새롭게 알게된 점!
setState는 기본적으로 이전 상태가 어떠했는지 가지고 있다.
setTodo((beforeTodo) => {함수});
이전에 있던것을 콜백함수로 쓰는것이 가능하다.

피드백

"필수 구현 사항들 간단명료하게 잘 구현하셨습니다.
newToDoCard의 id를 겹치지 않게하려는 의도는 좋습니다. 다만, toDoCard가 빈배열일 때(Working, Done 전부 삭제하여 없을 때) 에러 발생합니다.

addBtnHandler는 button의 onClick보다는 form의 onSubmit에 넣어주는 것이 더 적절합니다.
title과 detail이 비어있을 때만 추가해주는 걸 잘 구현하셨습니다. 다만, 사용자에게 왜 추가할 수 없는 이유를 알려주면 좋을 것 같습니다.
Main.jsx에서 toDoCard를 Array.from()으로 감싸는 건 불필요해보입니다.
h1 태그 사용 없이 h2, h3 태그를 사용하고 있습니다. 헤딩태그는 h1 > h2 > h3 순차적으로 사용해주세요. mdn 헤딩태그를 구글링해보시는 걸 추천드립니다.
Header.js와 Layout.js도 일관성 있게 jsx 확장자를 사용하면 좋을 것 같습니다.
DoneBtn은 다른 부분이 완료/취소 텍스트와 isDone만 다르기 때문에 조건문을 사용하지 않고 간결하게 수정할 수 있습니다.CSS를 컴포넌트별로 분리하고 싶으시면 CSS Module을 구글링 해보시는 걸 추천드립니다."