TodoList

이번에 과제에서는 타입스크립트를 사용하여 만들어봤다

그래서 빌드업을

npx create-react-app 프로젝트이름 --template typescript

이렇게 타입스크립트 리액트를 만들어서 사용했다.

폴더 구성을 이런식으로 만들어 봤다.

맨 처음 타입을 지정해준다.

라는 폴더에

이런식으로 내가 어떤변수를 어떻게 지정하여 쓸것인가를 정하여 불러올것이다.

그 다음으로

InsertItem과 ItemList를 각각 만들어 하나는 리스트완료 삭제를 하고

하나는 제목과 내용을 적는 란을 만드는 것이다.

InsertItem코드를 살펴보자면

import { useState } from "react";
import { Item } from "../types/type";
import { v4 as uuid } from "uuid";

interface Props {
  items: Item[];
  setItems: React.Dispatch<React.SetStateAction<Item[]>>;
}

const InsertItem = ({ items, setItems }: Props) => {
  const [itemName, setItemName] = useState("");
  const changeItemName = (e: React.ChangeEvent<HTMLInputElement>) => {
    setItemName(e.target.value);
  };

  const [itemBody, setItemBody] = useState("");
  const changeItemBody = (e: React.ChangeEvent<HTMLInputElement>) => {
    setItemBody(e.target.value);
  };

  const clickButton = (e: React.MouseEvent<HTMLButtonElement>) => {
    setItems([
      ...items,
      {
        itemId: uuid(),
        itemName: itemName,
        itemBody: itemBody,
        clear: false,
      },
    ]);
    setItemName("");
    setItemBody("");
  };

  return (
    <>
      제목 :
      <input
        className="task-input"
        value={itemName}
        onChange={changeItemName}
        type="text"
        required
      />
      내용 :
      <input
        className="task-input"
        value={itemBody}
        onChange={changeItemBody}
        type="text"
        required
      />
      <button className="button-add" onClick={clickButton}>{`추가하기`}</button>
    </>
  );
};

export default InsertItem;

이런식으로 키와 벨류값으로 만들어진 코드들이 타입 스크립트의 장점이다.

ItemList를 보자

import { Item } from "../types/type";

interface Props {
  items: Item[];
  setItems: React.Dispatch<React.SetStateAction<Item[]>>;
}
const ItemList = ({ items, setItems }: Props) => {
  const clickDelete = (data: Item) => {
    setItems(items.filter((item: Item) => item.itemId !== data.itemId));
  };

  const clickComplete = (data: Item) => {
    setItems(
      items.map((item: Item) => {
        if (item.itemId === data.itemId) {
          return { ...item, clear: !item.clear };
        }
        return item;
      })
    );
  };

  return (
    <ul>
      {items.map((data: Item) => {
        return (
          <li className="list-item" key={data.itemId}>
            <p className={`${data.clear ? "complete" : ""}`}>{data.itemName}</p>
            <p className={`${data.clear ? "complete" : ""}`}>{data.itemBody}</p>
            <div>
              <button
                className="button-delete"
                onClick={() => clickDelete(data)}
              >{`삭제하기`}</button>
              <button
                className="button-complete"
                onClick={() => clickComplete(data)}
              >{`완료`}</button>
            </div>
          </li>
        );
      })}
    </ul>
  );
};

export default ItemList;

똑같이 키와 밸류값으로 지정이 되어있고 각각의 Item들이 지정되어 types.ts에 정해진 타입을

불러와 적용 된것을 볼수있다.

확실히 타입 스크립트를 쓰니 오류를 잡기 쉽고 코드들이 간단명료하여 보기가 매우 편하다.

비완성

아직 진행중 <-> 완료를 구분하지 못하였고 삭제부분도 수정해야 한다.