여는 말

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

이전 글에서는 프로젝트를 생성하고, 정해진 Todo들을 화면에 나타냈습니다

이번 글에서는 새로운 Todo를 추가하는 것을 목표로 합니다

---

소스

todos에 초기값으로 넣어두었던 값을 지우고,

addTodo 함수를 CreateTodo 컴포넌트에 props로 넘겨줍니다

// TodoList.tsx

// ...
const TodoList = () => {
  const [todos, setTodos] = useState<ITodo[]>([]);
  //...

  return (
    <div className="todo-list-container">
      {Items()}
      <CreateTodo addTodo={addTodo} />
    </div>
  );
};
// ...

addTodo 함수를 Props로 받기 위해, Props의 타입을 만들었습니다

// CreateTodo.tsx

import { ITodo } from "./Todo";

interface CreateTodoProp {
  addTodo: (todo: ITodo) => void;
}

const CreateTodo = (props: CreateTodoProp) => {
  //...
}

input의 값을 제어하기 위해 state를 생성해서 input에 value로 할당하고,

변경을 감지하기 위한 이벤트 핸들러를 작성했습니다

// CreateTodo.tsx

//...
const CreateTodo = (props: CreateTodoProp) => {
  const [title, setTitle] = useState("");
  const [project, setProejct] = useState("");

  //...
  return (
    <div className="create-todo-container">
      <label className="lbl-title">Title</label>
      <input
        className="input-title"
        value={title}
        onChange={handleChangeTitle}
      ></input>
      <label className="lbl-project">Project</label>
      <textarea
        className="input-project"
        value={project}
        onChange={handleChangeProject}
      ></textarea>
      {/* ... */}
    </div>
  );
}

이벤트 핸들러를 붙이려고 하니 파라미터의 타입을 알 수 없습니다

다음과 같이 onChange에 직접 함수를 작성해서 타입을 확인할 수 있습니다

// CreateTodo.tsx

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

  const handleChangeProject = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
    setProejct(e.target.value);
  };
  // ...
};

마지막으로, 버튼을 클릭했을 때의 동작을 정의합니다

// CreateTodo.tsx

const CreateTodo = (props: ICreateTodo) => {
  const [idx, setIdx] = useState(0);
  //...

  const handleClickCreateBtn = () => {
    props.addTodo({ idx: idx, title: title, project: project });
    setIdx(idx + 1);
    setEmpty();
  };

  const handleClickCancelBtn = () => {
    setEmpty();
  };

  const setEmpty = () => {
    setTitle("");
    setProejct("");
  };
  return (
    <div className="create-todo-container">
      {/*...*/}
      <button className="btn-create" onClick={handleClickCreateBtn}>
        Create
      </button>
      <button className="btn-cancel" onClick={handleClickCancelBtn}>
        Cancel
      </button>
    </div>
  );
};

결과

---

닫는 말

전체 소스 : Github