Custom Hook을 사용한 페이지 전환 구현

06 Nov 2023

reactjs

React로 웹 애플리케이션을 개발할 때, 페이지 간의 전환은 핵심 기능 중 하나입니다. 여러 페이지를 관리하고 전환하는 것은 복잡할 수 있습니다. 이런 경우 Custom Hook을 사용하면 페이지 전환을 간편하게 구현할 수 있습니다.

Custom Hook 작성하기

다음은 Custom Hook을 이용하여 페이지 전환을 구현하는 간단한 예제입니다.

import { useState } from 'react';

export const usePageNavigation = () => {
  const [currentPage, setCurrentPage] = useState('');

  const navigateToPage = (page) => {
    setCurrentPage(page);
  }

  return [currentPage, navigateToPage];
};

이 Custom Hook은 usePageNavigation이라는 이름으로 페이지 전환 기능을 제공합니다. 현재 페이지 상태를 관리하기 위해 useState 훅을 사용합니다.

Custom Hook 사용하기

사용자는 이 Custom Hook을 사용하여 페이지 전환 기능을 구현할 수 있습니다. 다음은 HomePage와 AboutPage 두 개의 페이지를 갖는 애플리케이션에서 해당 Hook을 사용하는 예제입니다.

import React from 'react';
import { usePageNavigation } from './hooks/usePageNavigation';

const App = () => {
  const [currentPage, navigateToPage] = usePageNavigation();

  const handleNavigation = (page) => {
    navigateToPage(page);
  }

  return (
    <div>
      <button onClick={() => handleNavigation('home')}>Home</button>
      <button onClick={() => handleNavigation('about')}>About</button>

      {currentPage === 'home' && <HomePage />}
      {currentPage === 'about' && <AboutPage />}
    </div>
  );
}

export default App;

이 예제에서 usePageNavigation 훅을 사용하여 currentPage와 navigateToPage를 가져옵니다. 버튼 클릭 시 handleNavigation 함수를 호출하여 각 페이지로 전환합니다. 현재 페이지에 따라 해당 페이지 컴포넌트를 렌더링합니다.

마치며

Custom Hook은 React 애플리케이션에서 유용한 패턴 중 하나입니다. 페이지 전환처럼 반복적으로 사용되는 기능을 로직을 분리하여 간편하게 관리할 수 있습니다. Custom Hook을 사용하면 코드의 재사용성과 가독성을 향상시킬 수 있습니다.

#react #custom-hook