Custom Hook을 이용한 모달 창 구현

06 Nov 2023

reactjs

모달 창은 웹 개발에서 자주 사용되는 패턴 중 하나입니다. 사용자에게 팝업 형태로 정보를 제공하거나 추가적인 작업을 할 수 있는 기능을 제공합니다.

이번 포스트에서는 React의 Custom Hook을 이용하여 모달 창을 구현하는 방법에 대해 알아보겠습니다.

Custom Hook 만들기

먼저, 모달 창을 관리하기 위한 Custom Hook을 만들어보겠습니다. 이 Custom Hook은 모달의 열림과 닫힘 상태를 관리할 수 있어야 합니다.

import { useState } from 'react';

const useModal = () => {
  const [isOpen, setIsOpen] = useState(false);

  const openModal = () => {
    setIsOpen(true);
  };

  const closeModal = () => {
    setIsOpen(false);
  };

  return {
    isOpen,
    openModal,
    closeModal,
  };
};

export default useModal;

위의 코드에서는 useState 훅을 사용하여 isOpen 상태 변수를 정의하고, openModal 함수와 closeModal 함수를 제공합니다. openModal 함수는 모달을 열기 위해 isOpen 변수를 true로 설정하고, closeModal 함수는 isOpen 변수를 false로 설정합니다.

이제 모달을 사용할 컴포넌트에서 이 Custom Hook을 호출하여 모달 기능을 사용할 수 있습니다.

모달 컴포넌트 만들기

이제 모달을 나타내는 컴포넌트를 만들어보겠습니다.

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

const Modal = ({ title, content }) => {
  const { isOpen, openModal, closeModal } = useModal();

  return (
    <div>
      <button onClick={openModal}>Open Modal</button>

      {isOpen && (
        <div>
          <h2>{title}</h2>
          <p>{content}</p>
          <button onClick={closeModal}>Close Modal</button>
        </div>
      )}
    </div>
  );
};

export default Modal;

위의 코드에서는 useModal 훅을 호출하고, isOpen, openModal, closeModal 변수를 가져옵니다. 모달을 열기 위한 버튼과 모달 내부의 내용이 표시되는 코드를 작성합니다. 모달이 열리면 제공된 title과 content가 표시되고, 닫기 버튼을 누르면 모달이 닫힙니다.

모달 사용하기

이제 모달을 사용할 컴포넌트에서 Modal 컴포넌트를 렌더링하면 됩니다.

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

const App = () => {
  return (
    <div>
      <h1>Modal Example</h1>
      <Modal title="Hello" content="This is a modal example." />
    </div>
  );
};

export default App;

위의 예시에서는 Modal 컴포넌트를 호출하면서 title과 content를 제공합니다. 화면에는 “Modal Example”이라는 제목이 표시되고, “Hello”와 “This is a modal example.”라는 내용이 있는 모달 버튼이 표시됩니다.

이제 모달 버튼을 클릭하여 모달을 열고 닫을 수 있게 됩니다.

결론

Custom Hook을 사용하면 React 컴포넌트에서 모달과 같은 기능을 쉽게 구현할 수 있습니다. 모달을 열고 닫는 기능을 단순화하여 재사용 가능한 코드로 추출할 수 있습니다. 이를테면, 모달을 사용하는 여러 컴포넌트에서 동일한 기능을 사용할 수 있습니다. Custom Hook을 사용하여 모달을 구현하면 코드의 가독성과 유지보수성을 향상시킬 수 있습니다.

Custom Hook 만들기

모달 컴포넌트 만들기

모달 사용하기

결론

참고 자료