클론코딩 #7 | To-Do List 만들기 (1) (Form, React-Hook-Form)

To-Do List

학습 목표

• React, TypeScript 로 To-Do List 를 만들며 React 와 TypeScript 를 더 공부한다.
• useRecoilValue 와 useSetRecoilState 를 제외한 새로운 Recoil 함수(훅) 들을 배워본다.
• React Hook Form 을 새로 배워본다.

- React Hook Form

• 개인적으로 React 에서 form 으로 작업하기에 가장 좋은 방법이라고 생각합니다. 모든 걸 너무나 쉽게 만들어 주기 때문에
• 정말 큰 form 을 가지고 있을 때 매우 좋습니다. 또는 엄청 큰 form validation(검증) 을 가지고 있을 때에도
  • form validation : 데이터 타입을 체크하고, 조건을 확인합니다.
• 이번에는 To-Do List 이기 때문에 input 이 많이 필요 없지만 회원가입 이라고 생각하면 inpu 태그가 엄청 많이 있습니다.
• React와 TypeScript 만으로 간단한 To-Do List 를 만들어보고 추가로 Recoil 과 React-Hook-Form 을 사용하는 코드로 마이그레이션 해보면 공부해보겠습니다.

- React로만 만든 간단한 To-Do List

// ToDoList.tsx

import React, { useState } from "react";

function ToDoList() {
  const [toDo, setToDo] = useState("");
  const [toDoError, setToDoError] = useState("");
  const onChange = (event: React.FormEvent<HTMLInputElement>) => {
    const {
      currentTarget: { value },
    } = event;
    setToDoError("");
    setToDo(value);
  };
  const onSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    if (toDo.length < 10) {
      return setToDoError("To-Do should be longer");
    }
    console.log("submit");
  };
  return (
    <div>
      <form onSubmit={onSubmit}>
        <input onChange={onChange} value={toDo} placeholder="Write a to do" />
        <button>Add</button>
        {toDoError !== "" ? toDoError : null}
      </form>
    </div>
  );
}

export default ToDoList;

- React-Hook-Form 용법

1. useForm 이라는 hook 을 import 합니다.

// ToDoList.tsx

import { useForm } from "react-hook-form";

2. ToDoList 컴포넌트에 useForm 함수의 register 함수를 선언해 줍니다.
   • register 함수 : onChange 이벤트 핸들러, props, useState 전부 대체 해줍니다.

// ToDoList.tsx

...
function ToDoList() {
  const { register } = useForm();
  return (
    <div>
      <form>
        <input placeholder="Write a to do" />
        <button>Add</button<
      </form>
    </div>
  );
}

export default ToDoList;

3. resister 함수를 호출하면 어떤 일이 벌어지는 지 console.log(resister("toDo")); 하여 확인해봅시다.

// ToDoList.tsx

...
function ToDoList() {
const { register } = useForm();
console.log(register("toDo"));
...

• 위와 같은 객체를 생성합니다.
• onBlur : onClick 과 반대의 이벤트입니다, ```input```` 태그 밖의 화면 클릭
• 보기에 onChange 외에 특별할 것이 부족해 보이는 데 어떻게 활용될지 더 지켜보도록 합시다.

4. register 함수를 input 태그에 활용하기 위해 spread syntax(...) 를 input 태그 내에서 활용해줍니다.

// ToDoList.tsx

<input {...register("toDo")} placeholder="Write a to do" />

• register.name 은 value 가 되고, register.onChage 는 onChange 로 react-hook-form 사용하기 전 value, onChange, useState 를 register 함수로 대체했습니다.

5. form 의 입력값 변화를 보기 위해서 useForm 의 watch 함수를 불러옵니다. 마찬가지로 console.log 를 활용하여 watch 함수를 확인해줍니다.

// ToDoList.tsx

...
function ToDoList() {
  const { register, watch } = useForm();
  console.log(watch())
...

• 객체로 해당input 태그에 있는 register 의 이름값을 key로 태그 내의 value 를 확인할 수 있게 해줍니다.
• key 값과 함께 객체로 반환해 주는 것이 후에 input 태그가 여러개 있을때 보다 편리함과 가독성을 제공할 것입니다.