Custom Hook을 활용한 문서 생성 기능 구현

06 Nov 2023

reactjs

이번 포스트에서는 React에서 Custom Hook을 활용하여 문서 생성 기능을 구현하는 방법에 대해 알아보겠습니다.

문서 생성 기능은 사용자가 제목과 내용을 입력하면 해당 내용을 가지고 문서를 생성하는 기능입니다.

Custom Hook 만들기

먼저, Custom Hook을 만들기 위해 useDocumentCreator라는 이름의 Hook을 생성합니다. 이 Hook은 title과 content라는 두 가지 state 변수와 createDocument라는 함수를 반환합니다.

import { useState } from 'react';

const useDocumentCreator = () => {
  const [title, setTitle] = useState("");
  const [content, setContent] = useState("");

  const createDocument = () => {
    // 문서 생성 로직을 작성합니다.
  };

  return { title, setTitle, content, setContent, createDocument };
};

컴포넌트에서 Custom Hook 사용하기

이제, useDocumentCreator Hook을 컴포넌트에서 사용하여 문서 생성 기능을 구현해보겠습니다.

import React from 'react';
import useDocumentCreator from './useDocumentCreator';

const DocumentCreator = () => {
  const { title, setTitle, content, setContent, createDocument } = useDocumentCreator();

  const handleTitleChange = (e) => {
    setTitle(e.target.value);
  };

  const handleContentChange = (e) => {
    setContent(e.target.value);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    createDocument();
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input type="text" value={title} onChange={handleTitleChange} />
        <textarea value={content} onChange={handleContentChange} />
        <button type="submit">문서 생성</button>
      </form>
    </div>
  );
};

위의 컴포넌트에서는 useDocumentCreator Hook에서 반환된 state와 함수를 사용하여 제목과 내용을 입력받고, 문서 생성 기능을 수행합니다.

이제 DocumentCreator 컴포넌트를 원하는 곳에서 사용하여 문서 생성 기능을 구현할 수 있습니다.

마무리

이번 포스트에서는 React에서 Custom Hook을 활용하여 문서 생성 기능을 구현하는 방법에 대해 알아보았습니다. Custom Hook을 사용하면 코드를 재사용하고 관련 로직을 분리하여 컴포넌트를 더 간결하고 유지보수가 쉽도록 작성할 수 있습니다.

더 자세한 내용은 React 공식 문서를 참조하시기 바랍니다.

#React #CustomHook