모달 창은 웹 애플리케이션의 공통 UI 요소입니다. 중요한 정보를 표시하거나 사용자 입력을 요청하거나 작업을 확인하는 데 사용됩니다. 모달 창은 유용할 수 있지만 특히 페이지에 여러 모달이 있는 경우 관리하기 어려울 수도 있습니다.

useModal이 기사에서는 모달 창을 만들고 관리하는 것을 단순화하는 React에서 후크를 만드는 방법을 보여줍니다 . 이 후크를 사용하면 모달을 쉽게 열고 닫고 데이터를 전달하고 사용자 상호 작용을 처리할 수 있습니다.

useModal후크 만들기

후크를 생성하기 위해 React의 후크를 useModal사용하여 useState모달의 상태를 관리합니다. 후크 useState는 현재 상태 값과 상태 값을 업데이트하는 함수의 두 항목이 있는 배열을 반환합니다.

후크 에 대한 코드는 다음과 같습니다 useModal.

import { useState } from 'react';

function useModal() {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [modalContent, setModalContent] = useState(null);

  function openModal(content) {
    setModalContent(content);
    setIsModalOpen(true);
  }

  function closeModal() {
    setModalContent(null);
    setIsModalOpen(false);
  }

  return {
    isModalOpen,
    openModal,
    closeModal,
    modalContent,
  };
}

• isModalOpen: 모달이 현재 열려 있는지 여부를 나타내는 부울입니다.
• openModalcontent: 인수를 받아 상태를 설정 modalContent하고 로 설정하는 isModalOpen함수 입니다 true.
• closeModalmodalContent: 로 설정 null하고 isModalOpen로 설정하는 기능 false.
• modalContent: 모달의 내용.

이제 후크가 있으므로 useModal이를 사용하여 React 구성 요소에서 모달을 만들고 관리할 수 있습니다.

다음은 후크를 사용하는 구성 요소의 예입니다 useModal.

import { useState } from 'react';
import useModal from './useModal';

function App() {
  const [data, setData] = useState(null);
  const { isModalOpen, openModal, closeModal, modalContent } = useModal();

  function handleButtonClick() {
    setData('example data');
    openModal(<Modal onClose={closeModal} data={data} />);
  }

  return (
    <div>
      <button onClick={handleButtonClick}>Open Modal</button>
      {isModalOpen && modalContent}
    </div>
  );
}

function Modal({ onClose, data }) {
  function handleConfirm() {
    console.log('Confirmed with data:', data);
    onClose();
  }

  return (
    <div>
      <h2>Modal Content</h2>
      <p>Data: {data}</p>
      <button onClick={onClose}>Cancel</button>
      <button onClick={handleConfirm}>Confirm</button>
    </div>
  );
}

`Modal 구성 요소는 두 개의 소품을 받습니다: onClose및 data. onClose는 사용자가 "취소" 버튼 또는 "확인" 버튼을 클릭할 때 호출되는 함수입니다. data함수에 설정된 데이터입니다 handleButtonClick.

구성 Modal요소는 소품으로 전달된 데이터를 포함하여 모달 창의 내용을 표시합니다. 또한 "취소" 버튼과 "확인" 버튼도 포함되어 있습니다. 사용자가 "취소" 버튼을 클릭하면 onClose함수가 호출되어 모달 창을 닫습니다. 사용자가 "확인" 버튼을 클릭하면 handleConfirm콘솔에 데이터를 기록한 다음 onClose모달 창을 닫도록 호출하는 함수가 호출됩니다.

마지막으로 App구성 요소에서 클릭하면 모달을 여는 버튼을 렌더링하고 isModalOpentrue인지 확인하고 modalContentDOM에서 렌더링하여 모달을 조건부로 렌더링합니다.

결론

useModal이 기사에서는 모달 창의 생성 및 관리를 단순화하는 React에서 후크를 생성하는 방법을 보여주었습니다 . 이 후크를 사용하면 모달을 쉽게 열고 닫고 데이터를 전달하고 사용자 상호 작용을 처리할 수 있습니다.

후크 useModal는 특정 요구 사항에 맞게 사용자 정의할 수 있습니다. 예를 들어 다양한 유형의 모달을 추적하기 위해 더 많은 상태 변수를 추가하거나 특정 사용자 상호 작용을 처리하기 위해 추가 기능을 추가할 수 있습니다.

후크 를 사용하면 useModalReact 코드를 더 깨끗하고 체계적으로 만들 수 있으며 구성 요소에서 직접 모달을 관리하는 복잡성을 피할 수 있습니다. useModal이 기사가 도움이 되었기를 바라며, React 프로젝트에서 유용한 후크를 찾을 수 있기를 바랍니다 .