[Next.JS] 간단한 To do List 만들기

📖 다시 To Do List 부터!

최근에 진행한 프로젝트에서 To Do List와 같은 방식으로 구현 할 상황이 있었다.
간단하고 쉽게 생각했던 터라 진지하게 생각해본 적이 없었다.
하지만 React의 state를 활용하는 가장 기본적이고 간단한 프로젝트이므로 다시 구현해보고 다시 정확하게 이해하는 과정을 담은 포스팅이다.

✅ 무엇을 사용하는가?

1. 진행중이었던 TypeScript 기반의 Next.JS 환경에서 작업할 것이다.
2. To Do를 저장할 State를 활용할 것이다.
3. 이번엔 React-hook-form을 사용할 것이다.
4. Next.JS의 Router를 사용한다.

✅ 실전

📌 Form 생성

우선 아래와 같이 값을 입력 받을 Form을 만들어준다.
앞서 말 했듯, react-hook-form을 사용했다.

<form className="comment-input-body" onSubmit={handleSubmit(onSubmitHandler)}>
	<input {...register("todo")} type="text" placeholder="To-do 입력" autoComplete="off" />
	<button>전송</button>
</form>

📌 onSubmit 함수 작성

useState, useRef, React-hook-form을 사용해서 작성한다.

import { useRef, useState } from "react";
import { useRouter } from "next/router";
import { SubmitHandler, useForm } from "react-hook-form";
import ToDoList from "../components/ToDoList";

interface FormValue {
  todo: string;
}
interface IToDos {
  id: number;
  text: string;
}

  const [toDos, setToDos] = useState<IToDos[]>([]);
  const idNumber = useRef(1); //id값으로 부여

  const {
    register,
    handleSubmit,
    watch,
    reset,
    formState: { errors },
  } = useForm<FormValue>();

  const onSubmitHandler: SubmitHandler<FormValue> = (data) => {
    if (data.todo === "") {
      alert("내용을 입력해주세요.");
      return;
    }
    //newToDos: toDos 배열 안에 todo에 부여할 id, 입력받은 text를 담는다.
    const newToDos = [...toDos, { id: idNumber.current++, text: data.todo }];
    setToDos(newToDos);
    reset(); //react-hook-form의 reset을 사용한다. 이로써 입력 후 input 초기화!
  };

📌 To Do 출력하기

<div>
	{toDos.map((data) => (
    <ToDoList key={data.id} toDos={data.text} />
    	)
	)}
</div>

<formonSubmit={handleSubmit(onSubmitHandler)}>
	<input {...register("todo")} type="text" placeholder="오늘은 어떤 일이 있었나요?" autoComplete="off" />
	<button>전송</button>
</form>

위와 같이 map을 사용해서 출력해준다. typescript를 사용했으므로 CommentList 컴포넌트에 그냥 prop을 전달 할 경우 에러가 발생하므로 아래처럼 타입을 지정한 뒤 만들어주자!

📌 ToDoList.tsx

interface IProps {
  toDos: string;
}

const ToDoList = ({ toDos }: IProps) => {
  return (
    <div>
      <div>{toDos}</div>
    </div>
  );
};

export default ToDoList;

이렇게 하면 간단한 ToDo List가 완성 된다!