프로젝트 개발을 진행할 때 많은 반복 작업을 해야 할 수 있습니다. 이러한 경우 Custom Hook을 활용하여 프로젝트 템플릿 기능을 추가할 수 있습니다. Custom Hook은 React 함수 컴포넌트에서 반복적으로 사용되는 로직을 재사용하기 위한 방법입니다. 이 글에서는 Custom Hook을 사용하여 프로젝트 템플릿 기능을 추가하는 방법에 대해 알아보겠습니다.

Custom Hook 만들기

먼저, Custom Hook을 만들어보겠습니다. Custom Hook은 “use”라는 접두사로 시작해야 하며, React Hook을 사용해야 합니다. 아래는 간단한 예제입니다.

import { useState, useEffect } from 'react';

function useProjectTemplate(projectId) {
  const [projectData, setProjectData] = useState(null);

  useEffect(() => {
    // projectId를 이용하여 프로젝트 데이터를 가져오는 로직
    fetchProjectData(projectId).then((data) => setProjectData(data));
  }, [projectId]);

  return projectData;
}

export default useProjectTemplate;

위 예제 코드에서는 useProjectTemplate라는 Custom Hook을 정의했습니다. 이 Custom Hook은 projectId를 매개변수로 받고, 해당 프로젝트의 데이터를 가져오는 로직을 구현하고 있습니다. useState와 useEffect Hook을 사용하여 컴포넌트의 상태와 Side Effect를 관리하고, projectData를 리턴해줍니다.

Custom Hook 사용하기

이제 만든 Custom Hook을 다른 컴포넌트에서 사용해보겠습니다. 예를 들어, 프로젝트 상세 페이지에서 특정 프로젝트의 데이터를 가져와야 한다고 가정해봅시다.

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

function ProjectDetailPage({ projectId }) {
  const projectData = useProjectTemplate(projectId);

  if (!projectData) {
    return <p>Loading project data...</p>;
  }

  return (
    <div>
      <h1>{projectData.title}</h1>
      <p>{projectData.description}</p>
      {/* 추가적인 프로젝트 템플릿 기능을 렌더링 */}
    </div>
  );
}

export default ProjectDetailPage;

위 예제 코드에서는 useProjectTemplate Custom Hook을 ProjectDetailPage 컴포넌트 안에서 사용하고 있습니다. projectId를 매개변수로 전달하여 해당 프로젝트의 데이터를 가져오고, 가져온 데이터를 렌더링합니다. 만약 데이터가 로딩 중이라면 “Loading project data…“라는 문구를 표시합니다.

결론

Custom Hook을 사용하여 프로젝트 템플릿 기능을 추가하는 방법에 대해 알아보았습니다. Custom Hook을 사용하면 반복적인 작업을 줄이고 코드의 재사용성과 가독성을 향상시킬 수 있습니다. 이를 활용하여 프로젝트 개발을 보다 효율적으로 진행할 수 있습니다.

#React #CustomHook