[TS/React] JS/props-drilling 방식으로 쓴 To-Do List 를 TypeScript로 바꿔보기 : 답안참고

0309 💎

🪄 TypeScript 사용해 To-Do List 만들기 - props-drilling 방식

튜터님의 답안 코드를 살펴보자!

하지만 뭔가 코드에서 잘못 된 것인지 에러가 떠있었고 ㅠㅠ

내가 코드 수정해서 해결하긴 했다.

강의에서와 달리 hook을 만들어 사용해서 강의 때 코드와 다르기도 했다.

• 답안 코드의 to-do list 는 간소화된 투두리스트라 todo는 id, title, isDone(완료여부) 의 key들로만 간단히 구성됨.
• App.tsx > TodoList.tsx 컴포넌트 > TodoItem.tsx 컴포넌트 방식으로 속해있다.
• TodoList가 거의 메인이다.
  이 컴포넌트에서 hook을 import해 사용하며, TodoItem으로 이 hook에서 받은 리턴값을 props 형태로 전달해준다
• hook은 TodoList.hooks.ts 에 하나 있는 useTodo( ) 를 사용한다

 

 

<TodoList.tsx> - 메인

import React from "react";
import { TodoItem } from "./Todo";
import { useTodo } from "./TodoList.hooks";

export type Todo = {
    // 여기서 이렇게 Todo 안 id,title,isDone 타입 지정해줬기때문에, 다른 곳에서도 타입 쓸 떄
    // id : string 이라고 직접 써줘도 되지만, 이걸 응용해서, id: Todo["id"] 라고도 쓸 수 있다
    // 아마 이렇게 처리해주면 좋은 점이, 만약 이 타입내에서 id: number로 바꾸면 맞게 알아서
    // id:Todo["id"]도 id:number가 되는 것
    id: string;
    title: string;
    isDone: boolean;
}; // 이 예시에서는 todo내용으로 title만 input으로 넣도록 다룸 (따로content,date없음)

export const TodoList: React.FC = () => {
    const {
        todos,
        title,
        handleTitleChange,
        handleAddTodo,
        handleDeleteTodo,
        handleToggleTodo,
    } = useTodo(); // 이 hook에서 todos, title 등 리턴해주도록 되어있음 / 훅으로 간소화해주기! state선언도 다 hook에서 처리

    return (
        <div>
            <input value={title} onChange={handleTitleChange} type="text" />
            <button
                onClick={() => {
                    handleAddTodo(title);
                }}
            >
                Add Todo
            </button>
            <ul>
                {todos.map((todo) => (
                    <TodoItem
                        key={todo.id}
                        todo={todo}
                        onToggle={handleToggleTodo}
                        onDelete={handleDeleteTodo}
                    />
                ))}
            </ul>
        </div>
    );
};

 

 

<TodoList.hooks.ts> - hook이 있는 ts파일

이 hook, useTodo 안에서 todos, title 의 state도 선언하고 (useState)
title input 의 onChange 함수인 handleTitleChange,
todo 를 추가, 삭제, 완료여부토글하는 handleAddTodo, handleDeleteTodo, handleToggleTodo 함수를 모두 써줌.

그래서 이러한 todos, title, handleTitleChange, handleAddTodo, handleToggleTodo, handleDeleteTodo
를 모두 리턴값으로 반환해주는 방식이다.

import { useState } from "react";
import { Todo } from "./TodoList";

export const useTodo = () => {
    const [todos, setTodos] = useState<Todo[]>([]);

    // 원래 title state와, handleTitleChange이 있었던 거 같음! (빠진듯?)
    // 아래는 내가 작성 
    const [title, setTitle] = useState("");
    const handleTitleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        setTitle(e.target.value);
    };

    const handleAddTodo = (title: Todo["title"]) => {
        const newTodo: Todo = {
            id: crypto.randomUUID(),
            title,
            isDone: false,
        };
        setTodos((prev) => [...prev, newTodo]);
        setTitle("");
    };

    const handleToggleTodo = (id: Todo["id"]) => {
        setTodos((prev) =>
            prev.map((todo) =>
                todo.id === id ? { ...todo, isDone: !todo.isDone } : todo
            )
        );
    };

    const handleDeleteTodo = (id: Todo["id"]) => {
        setTodos((prev) => prev.filter((todo) => todo.id !== id));
    };

    return {
        // 이 훅에서 리턴해주는 값들
        todos,
        title,
        handleTitleChange,
        handleAddTodo,
        handleToggleTodo,
        handleDeleteTodo,
    };
};

 

 

<Todo.tsx> - to-do item 

• todoitem 의 내용이 들어있다
• 컴포넌트 타입으로 : React.Fc<프롭스 타입> 을 써주면 됨. 위에서 TodoProps 타입을 만들어두었으니, 그걸 <>안에 넣기 - ( 제네릭 < > )  (물론 이 방식을 꼭 쓸 필욘없다)
• FC: Functional Component 줄임말
• React.Fc 로 타입을 써주는 건 React 18버전 이전 방식이라고 들었으며,  여기에 암묵적으로 children이 포함되어있어 children props에대한 타입 체킹이 명확하지 않다는 문제점이 있어 사용을 지양하자는 얘기가 있었다고 한다.
  •  근데 이 부분이 현재 좀 수정이 된건지? 하튼 다시 써도 된다는 식으로 들은 거 같다. 확실치않음 ..!

import React from "react";
import { Todo } from "./TodoList"; // 타입 임포트

type TodoProps = {
    todo: Todo;
    onToggle: (id: Todo["id"]) => void; // (id: string) => .. 과 같다
    onDelete: (id: Todo["id"]) => void;
};

export const TodoItem: React.FC<TodoProps> = ({ todo, onToggle, onDelete }) => {
    return (
        <li>
            <input
                type="checkbox" // 여기서는 완료/취소버튼이 아니라, 체크박스 [v] input으로 toggle 해주고 있음
                checked={todo.isDone}
                onChange={() => onToggle(todo.id)} // 즉, handleToggleTodo 함수. 인자가 있으니 콜백함수로 넣는다
            />
            {todo.title}
            <button onClick={() => onDelete(todo.id)}>Delete</button>
        </li>
    );
};