(React & TypeScript) Input Component

강의

App.tsx

import React, { useState } from "react";
import "./App.css";
import InputField from "./components/InputField";

const App: React.FC = () => {
  const [todo, setTodo] = useState<string>("");

  return (
    <div className="App">
      <span className="heading">Taskify</span>
      <InputField todo={todo} setTodo={setTodo} />
    </div>
  );
};

export default App;

useState를 사용하여 todo값을 설정
을 통해서 todo 값은 string으로 타입 설정

InputField.tsx

import React from "react";
import "./styles.css";

interface Props {
  todo: string;
  setTodo: React.Dispatch<React.SetStateAction<string>>;
}

const InputField: React.FC<Props> = ({ todo, setTodo }: Props) => {
  return (
    <form className="input">
      <input type="input" onChange={(e) => setTodo(e.target.value)} placeholder="Enter a Task" className="input__box" />
      <button className="input__submit" type="submit">
        Go
      </button>
    </form>
  );
};

export default InputField;

< Props > : Interface정의
{todo, setTodo}: Props -> interface Props적용