학습내용

todolist 보완

todolist 보완

• Github
• 배포 사이트

후발대 강의 내용을 바탕으로 기존의 투두리스트 보완

초기 데이터 분리

const App = () => {
  // list
  const [list, setList] = useState(initialList);
  .
  .
  .
// 초기 list 데이터
const initialList = [
  { id: uuid(), date: "2022/12/07", todo: "리액트 과제", isDone: true },
  { id: uuid(), date: "2022/12/06", todo: "티켓팅", isDone: false },
  { id: uuid(), date: "2022/12/07", todo: "리액트 심화", isDone: false },
  { id: uuid(), date: "2022/12/06", todo: "자바스크립트 과제", isDone: true },
];

useState 안에 들어있던 초기 데이터를 initialList에 할당해서 훨씬 가독성 좋은 코드로 변경

id값 변경

숫자에서 uuid() 형식으로 변경

uuid()
Universally Unique IDentifier의 약자로 네트워크상에서 고유성이 보장되는 id를 생성해주는 모듈. 총 1, 3, 4, 5 네 개의 버전이 있는데 4버전이 가장 보편적으로 쓰인다.

Contents 중복 코드 제거

App.jsx

const App = () => {
  return (
    <div className="wrap">
      <Header list={list} setList={setList} />
      <div className="list-contents">
        <Contents list={list} setList={setList} name="working" />
        <Contents list={list} setList={setList} name="done" />
      </div>
      <Footer />
    </div>
  );
};

Contents.jsx

export default function Contents({ list, setList, name }) {
  const component = name === "working" ? true : false;
	.
    .
    .
  return (
    <>
      {list
        .filter((todo) => component === !todo.isDone)
        .map((todo) => {
          return (
            <TodoList
              todo={todo}
              id={todo.id}
              isDone={todo.isDone}
              handleDelete={deleteList}
              handleButton={listButton}
            />
          );
        })}
    </>
  );
}

기존에는 <Contents> 컴포넌트에 두 개의 <TodoList> 컴포넌트를 렌더링했었는데, 완료 전/후로 리스트를 분리하기 위해 중복코드를 또 작성해야만 하는 방식이었기 때문에 효율성이 떨어졌다.

현재의 방식은 <TodoList/> 컴포넌트가 아닌 <Contents/> 컴포넌트 자체를 분리해서 props로 받아오는 name값을 기준으로 데이터를 분리하는 방식이다.

TodoList.jsx

export default function TodoList({
  todo,
  id,
  isDone,
  handleDelete,
  handleButton,
}) {
  return (
    <div className="list">
      {isDone ? (
        <div className="done-list">
          <span className="list-date">{todo.date}</span>
          {todo.todo}
        </div>
      ) : (
        <div className="todo-list">
          <span className="list-date">{todo.date}</span>
          {todo.todo}
        </div>
      )}
    </div>
  );
}

<TodoList> 컴포넌트를 하나로 통일함에 따라 두 개의 <div>에 따로 적용했었던 기존의 스타일 역시 <div className="list"> 안에서 삼항연산자를 통해 두 가지 스타일로 나누어 적용했다.