여는 말

TS를 익히기 위해 만들어본 TODO 앱입니다

이전 글에서는 추가된 TODO를 수정하고 삭제했습니다

이번 글에서는 수정 컴포넌트를 분리하는 것을 목표로 합니다

---

소스

TodoList.tsx

TodoList 컴포넌트에서는 수정중인 todo의 id 상태값을 관리하고,

이 상태에 따라 Todo를 다르게 보여줍니다

// TodoList.tsx
import EditTodo from "./EditTodo";
//...

const TodoList = () => {
  // ...
  const [editIdx, setEditIdx] = useState<number | null>(null);
  
  const updateTodo = (todo: ITodo) => {
    // ...
    setEditIdx(null);
  };

  const Items = () => {
    return todos.map((item) => {
      if (item.idx === editIdx) {
        return (
          <EditTodo
            idx={item.idx}
            title={item.title}
            project={item.project}
            updateTodo={updateTodo}
          ></EditTodo>
        );
      } else {
        return (
          <Todo
            idx={item.idx}
            title={item.title}
            project={item.project}
            deleteTodo={deleteTodo}
            setEditIdx={setEditIdx}
          ></Todo>
        );
      }
    });
  };
  // ...
}

EditTodo.tsx

Todo 컴포넌트에 존재하던 Todo 수정에 관련된 로직을 EditTodo 컴포넌트로 분리했습니다

// EditTodo.tsx

import React, { useEffect, useState } from "react";
import { ITodo } from "./Todo";

interface EditTodoProp extends ITodo {
  updateTodo: (todo: ITodo) => void;
}
const EditTodo = (props: EditTodoProp) => {
  const [title, setTitle] = useState<string>("");
  const [project, setProject] = useState<string>("");

  useEffect(() => {
    setTitle(props.title);
    setProject(props.project);
  }, []);

  const handleClickSubmitBtn = () => {
    props.updateTodo({ idx: props.idx, title: title, project: project });
  };

  const handleChangeTitle = (e: React.ChangeEvent<HTMLInputElement>) => {
    setTitle(e.target.value);
  };

  const handleChangeProject = (e: React.ChangeEvent<HTMLInputElement>) => {
    setProject(e.target.value);
  };

  return (
    <div className="todo-item">
      <div>
        <input
          className="input-edit-title"
          value={title}
          onChange={handleChangeTitle}
        ></input>
      </div>
      <div>
        <input
          className="input-edit-project"
          value={project}
          onChange={handleChangeProject}
        ></input>
      </div>
      <div className="btns-container">
        <button onClick={handleClickSubmitBtn}>submit</button>
      </div>
    </div>
  );
};

export default EditTodo;

Todo.tsx

// Todo.tsx

interface TodoProjs extends ITodo {
  setEditIdx: (idx: number | null) => void;
  //...
}

const Todo = (props: TodoProjs) => {
  //...

  const handleClickUpdateBtn = () => {
    props.setEditIdx(props.idx);
  };

  return (
    <div className="todo-item">
      {/*...*/}
        <button className="btn-update" onClick={handleClickUpdateBtn}>
          <FontAwesomeIcon icon={faPenToSquare} />
        </button>
      {/*...*/}
    </div>
  );
};

---

닫는 말

전체 소스 : Github