Diary Form 만들기

다이어리 작성 기능

다이어리 작성 기능을 만들기 위해 작성자와 제목, 내용을 입력받을 input들과 이 값들을 서버에 저장할 수 있게 해야한다.

커스텀 훅 사용

input에 값을 입력받고 onChange 리스너를 통해 e.target.value로 state를 수정해주는 로직이 모두 동일하므로 이 부분을 hook으로 만들어준다.
데이터를 가지고 오는 로직들은 전부 hook으로 관리하는게 좋다고 한다.

// hooks/useInput.js
import React, { useState } from "react";

const useInput = () => {
  const [value, setValue] = useState("");

  const handler = (e) => {
    setValue(e.target.value);
  };

  return [value, handler];
};

export default useInput;

이렇게 배열에 value와 그 핸들러를 배열에 담아 반환하고 컴포넌트에서는 아래와 같이 사용한다.

// DiaryForm.jsx
import useInput from "../hooks/useInput";
const DiaryForm = () => {
  const [author, onChangeAuthorHandler] = useInput();
  const [title, onChangeTitleHandler] = useInput();
  const [content, onChangeContentHandler] = useInput();
	... 생략
  
}

이렇게 custom hook으로 재사용 해봤다. 저렇게 만든 핸들러는 이전 코드처럼 onChange에서 이벤트 핸들러로 넣어주면 된다!