231107 / Day 35

Todo list 구현하기 타임어택(1시간) 이후 리팩토링. + 하면서 궁금했던 부분 / 배운 부분들

 

1. 각각의 todo 카드에 key 값 부여하는 방법

:  처음 기능을 구현할 때는 arr.length +1의 방식으로  했었는데,  uuid라는 모듈을 사용할 수도 있다.

yarn add react-uuid로 모듈을 설치하고 해당 파일 내에 uuid를 import 해주기만 하면 간편하게 고유한 키 값을 생성할 수 있다. 

 

2. 거의 유사하게 반복되는 부분 컴포넌트 분리

:   useState로 관리 되는 리스트를 map로 돌려서 각각의 카드로 뿌린 부분이 있었는데, 두 개의 섹션 내에 동일하게 들어가서 컴포넌트로 분리를 하려고 했다. 그런데 중간에 button부분이 달라서 어떻게 분리를 해야 하나 고민을 하다가 결국 섹션을 통째로 덜어내서 컴포넌트를 만들었다(workingSection, DoneSection). 그런데 그렇게 분리하고 보니, 재사용의 의미가 없었다. 

처음에는 아래와 같이DoneSection 컴포넌트를 작성했다.

import "./Card.css"

const DoneCard = ({ cards, handleDeleteBtn, handleCancelBtn }) => {
  return cards.map((item) => {
    return item.isDone === "true" ? (
      <div key={item.id} className="card">
        <div>
          <h2>{item.title}</h2>
          <p>{item.content}</p>
        </div>
        <div>
          <button
            onClick={() => handleDeleteBtn(item.id)}
            className="cardButton deleteButton"
          >
            Delete
          </button>
          <button
            onClick={() => handleCancelBtn(item)}
            className="cardButton cancelButton"
          >
            Back to working!
          </button>
        </div>
      </div>
    ) : null;
  });
};

export default DoneCard;

후에 리팩토링하여 아래와 같이 작성하였다. 이렇게 하고 나면 두 가지 다른 섹션에서 완벽하게 동일한 내용에 코드를 하나의 컴포넌트로 분리하여 사용할 수 있게 된다.

import React from "react";

export default function TodoList({
    cards,handleComplete, handleDelete,listIsDone
}) {
  return (
    <>
      <div>
        <h2>{listIsDone ? "완료 목록" : "할 일 목록" }</h2>
        {cards
          .filter((item) => item.isDone === listIsDone)
          .map((item) => {
            return (
              <div
                style={{
                  border: "1px solid black",
                  margin: "10px",
                  padding: "10px",
                }}
                key={item.id}
              >
                <h2>{item.title}</h2>
                <p>{item.content}</p>
                <button onClick={() => handleComplete(item)}>완료</button>
                <button onClick={() => handleDelete(item.id)}>삭제</button>
              </div>
            );
          })}
      </div>
    </>
  );
}

리팩토링 내용:

- UI영역에서 cards 배열을 map으로 돌리기 전에 isDone이라는 status 값( true 또는 false)으로 먼저 filtering을 해준다. 

- 컴포넌트 분리 후 부모 컴포넌트로부터 porps를 내려줄 때 isDone (listIsDone) 값을 같이 내려 준다. (Working Section: false, Done Section: true)

- 섹션 이름을 나타낼 때, 내려받은 props(istIsDone)를 사용한다. 

 

3. 그 외 실수한 부분

: useState를 사용하면서 import 하지 않음.

컴포넌트의 return 부분이 function 밖에 나와 있음.

jsx 문법에서 최상위 태그는 하나만 존재할 수 있음 .하나의 div 혹은 빈태그로 감싸주기.