[ 타입스크립트(TypeScript) ] form 태그를 이용하여 state 관리하기

📍 form 태그를 이용하여 state 관리하기

TS를 이용하여 Todo-list를 만들면서 이전까지는 button의 onClick을 이용하여 input 값을 보냈는데 이번에는 form태그를 사용하여 값을 보내봤다. form태그를 사용하면 input창의 값을 보낼 때 onKeyPress(enter) 함수를 따로 만들지 않아도 돼서 유용했다. 웬만하면 useState, useRef가 어떤 타입 인지도 명시하자.

 

또, 함수내에서 event를 받아올때 eventType이 무엇인지 알고 싶으면 event를 처리하는 태그에 마우스를 올리면 타입을 어떻게 적용해야 하는지 다음 사진처럼 팝업창이 뜬다.

 

 

팁으로 14번 라인처럼 함수내에서 함수를 선언해야 하는 경우 가독성을 높이기 위해 utility 폴더를 따로 만들어서 저장하고 import 하는 방법을 사용했다.

 

 

interface Todo {
  id: string;
  text: string;
  done: boolean;
}

const App = () => {
    const [todos, setTodos] = useState<Todo[]>(TODO_CONSTANT);
    const nextId = useRef<number>(todos.length + 1);
    const [title, setTitle] = useState<string>("");

    const handleOnSubmit = (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault();
        const submitTodo: Todo = getSubmitTodo(nextCurrentId.current, title);
        setTodos(todos.concat(submitTodo));
        setTitle("");
        nextId.current += 1;
  };

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

    return(
    <>
        <form onSubmit={handleOnSubmit}>
            <li>
                <input
                    placeholder="값을 입력하세요."
                    onChange={handleEvent}
                    value={title}
                />
                <button>추가!</button>
            </li>
        </form>
    </>
    )
}

// utility/getSubmitTodo/index.tsx
const getSubmitTodo = (nextId: number, title: string) => {
  const submitTodo = {
    id: String(nextId),
    text: title,
    done: false,
  };
  return submitTodo;
};

export default getSubmitTodo;