안녕하세요 여러분,

React 후크는 React의 매우 유용한 기능이며 사용자 정의 React 후크와 함께 이러한 사용자 정의 React 후크는 무한한 가능성을 가지며 컨테이너/프레젠테이션 모델에서 컨테이너 로직을 쉽게 대체할 수 있습니다.

자세한 내용은 여기Patter.dev를 참조하세요.

처음부터 모달 만들기

모달의 프리젠테이션 부분 만들기

여기에서 Modal의 프리젠테이션 부분을 만들어 보겠습니다. 빠르게 코드를 보여드리겠습니다.

import React, { ReactNode } from "react";

interface ModalType {

  children?: ReactNode;

  isOpen: boolean;

  toggle: () => void;

}

export default function Modal(props: ModalType) {

  return (

    <>

        <div className="modal-overlay" >

          <div  className="modal-box">

            {props.children}

          </div>

        </div>

    </>

  );

}

이것을 설명하겠습니다. 여기에 전체 너비와 높이를 갖는 두 개의 div an overlay-div 과 a modal-box div 가 있습니다.

따라서 우리는 사용자가 modal-box div 이외의 다른 곳을 클릭하면 모달이 닫히는 아래와 같은 것을 달성하려고 합니다. 그리고 모든 모달 콘텐츠는 모달의 흰색 부분 안에 있습니다.



모달 div에 대한 CSS를 빠르게 설정해 보겠습니다.

.modal-overlay {

  z-index: 9999;

  width: 100vw;

  height: 100vh;

  position: absolute;

  top: 0;

  background: rgba(0, 0, 0, 0.7);

  display: flex;

  justify-content: center;

  align-items: center;

}

.modal-box {

  display: block;

  background: white;

  width: 70%;

  height: 70%;

  padding: 1rem;

  border-radius: 1rem;

}

이 작업이 완료되면 상태가 참인 경우에만 Modal을 렌더링하는 논리 부분에 도달해야 합니다.

커스텀 후크가 필요한 이유는 무엇입니까?

여기서는 모달을 사용하고 모든 파일에 동일한 기능을 추가하려고 할 때 동일한 논리를 반복해서 작성할 필요가 없도록 사용자 지정 후크를 사용했습니다.

후크에 논리 추가

우리의 useModal.tsx 폴더에 새 파일hooks을 빠르게 만들어 보겠습니다. 이것은 순수한 함수가 될 것이며 지금은 로직만 포함할 것입니다.

// useModal.tsx

import { useState } from "react";

export default function useModal() {

  const [isOpen, setisOpen] = useState(false);

const toggle = () => {

    setisOpen(!isOpen);

  };

return {

    isOpen,

    toggle

  };

}

여기에는 모달을 표시하거나 숨기는 상태isOpen가 있고 실제로 모달의 가시성을 전환하는 기능이 있습니다.

이제 App.tsx에서 이 코드를 사용하고 클릭 시 트리거되는 모달을 구현해 보겠습니다.

로직과 프리젠테이션 파트 결합( hooks + Modal 컴포넌트)

Modal 구성 요소 호출 및 useModal

Modal 구성 요소를 가져오고 useModal App.tsx 연결해 보겠습니다.

import Modal from "./component/modal";

import useModal from "../src/hooks/useModal";

다른 논리를 추가하고 isOpen 및 toggle를 Modal 구성 요소에 전달합니다.

우리의 App.tsx는 아래와 같이 보일 것입니다.

export default function App() {

  const { isOpen, toggle } = useModal();

  return (

    <div className="App">

      <h1>Hello CodeSandbox</h1>

      <h2>Start editing to see some magic happen!</h2>

      <button onClick={toggle}>Open Modal </button>

      <Modal isOpen={isOpen} toggle={toggle}></Modal>

    </div>

  );

}

Modal 컴포넌트에 로직 추가

이 시점에서 우리가 필요한 것은 Modal 구성 요소에 몇 가지 기본적인 조건부 렌더링 논리를 추가하는 것입니다. 이제 우리가 무엇을 가지고 있는지 봅시다.

// Modal.tsx

import React, { ReactNode } from "react";

interface ModalType {

  children?: ReactNode;

  isOpen: boolean;

  toggle: () => void;

}

export default function Modal(props: ModalType) {

  return (

    <>

      {props.isOpen && (

        <div className="modal-overlay" onClick={props.toggle}>

          <div  className="modal-box">

            {props.children}

          </div>

        </div>

      )}

    </>

  );

}

onClick 이벤트를 추가하고 toggle 함수를 전달하여 모달 외부의 다른 곳을 클릭하면 모달 가져오기가 종료되도록 했습니다.

또한 if isOpen = false가 아무 것도 반환하지 않도록 구성 요소를 렌더링했습니다.

이 시점에서 우리는 끝났습니다. 이제 어떻게 보이는지 봅시다.



이제 잘 작동합니다 .......... 음 거의 실제로.

내부 div를 클릭해도 전체 모달이 가까워지는 것을 알아차리면 몇 가지 문제가 발생할 수 있으므로 우리가 할 수 있는 일이 아닙니다.

이는 모든 이벤트가 상위 div를 통해 전파되는 Javascript의 이벤트 버블링이라는 현상으로 인해 발생합니다.

버그 해결 및 이벤트 전파 처리.

React에서는 이미 React에서 제공하는 usingevent.stopPropagation() 메소드로 쉽게 해결할 수 있습니다.

사용자가 Inner div를 클릭할 때만 이 메서드를 호출합니다.

이제 코드가 어떻게 보이는지 봅시다

// Modal.tsx

import React, { ReactNode } from "react";

interface ModalType {

  children?: ReactNode;

  isOpen: boolean;

  toggle: () => void;

}

export default function Modal(props: ModalType) {

  return (

    <>

      {props.isOpen && (

        <div className="modal-overlay" onClick={props.toggle}>

          <div onClick={(e) => e.stopPropagation()} className="modal-box">

            {props.children}

          </div>

        </div>

      )}

    </>

  );

}

이야!!!!!!!!!!! 이제 위의 문제가 해결되었습니다

샌드박스에서 사용해 보시겠습니까?

더 많은 기능을 추가하여 테스트해 보시기 바랍니다.

TL;DR

컨테이너/프리젠테이션 디자인 패턴에 대해 배웠습니다

.

고유한 사용자 정의 후크를 만들고 UI에서 모든 논리 부분을 분리하는 방법을 배웠습니다.

Modal 구성 요소의 작동 방식과 재사용 가능한 React 구성 요소를 만드는 방법을 배웠습니다

.

이벤트 전파란 무엇이며 중지하는 방법에 대해 알아보았습니다.

이 게시물이 마음에 들면 Twitter에서 연결해 보겠습니다.



이 블로그는 Blogtiple을(를) 사용하여 게시되었습니다.