React에서 모달 구성 요소를 구현하는 방법

소개

모달은 응용 프로그램 내의 별도 창이며 대부분 대화 상자로 사용됩니다. 정보를 제공하거나 확인을 요구하는 일반적인 사용자 인터페이스 패턴입니다.

이 자습서에서는 React 프로젝트에서 모달 구성 요소를 구현하는 방법에 대해 배웁니다. 상태를 관리하는 대시보드 구성 요소와 모달에 액세스하는 버튼을 만듭니다. 또한 Modal 구성 요소를 개발하여 모달과 닫기 버튼을 빌드합니다. 버튼을 클릭하면 프로젝트가 모달을 표시하고 닫습니다.

전제 조건

이 자습서를 완료하려면 다음이 필요합니다.

이 튜토리얼을 시작하기 전에 React에 대한 기본적인 이해. React.js 코딩 방법 시리즈를 따라 React에 대해 자세히 알아볼 수 있습니다.

1단계 - 대시보드 구성 요소 시작

대시보드는 모달을 표시하는 곳입니다. 대시보드를 시작하려면 React 인스턴스와 Component 객체를 Dashboard.js 파일로 가져오세요. Dashboard 구성 요소를 선언하고 상태를 설정합니다.

import React, { Component } from "react";

class Dashboard extends Component {
  constructor() {
    super();
    this.state = {
      show: false
    };
    this.showModal = this.showModal.bind(this);
    this.hideModal = this.hideModal.bind(this);
  }

  showModal = () => {
    this.setState({ show: true });
  };

  hideModal = () => {
    this.setState({ show: false });
  };
}

export default Dashboard

상태에는 값이 false인 속성 show가 포함됩니다. 이렇게 하면 사용자가 열라는 메시지를 표시할 때까지 모달을 숨길 수 있습니다. showModal() 함수는 .setState() 메서드로 상태를 업데이트하여 show 속성 값을 true 로 변경합니다. 사용자가 모달을 열 때. 마찬가지로 hideModal() 함수의 .setState() 메서드는 모달을 닫고 show 속성의 값을 거짓.

참고: .bind() 메서드를 사용하여 constructor()에 함수를 바인딩해야 합니다.

상태와 함수를 적용하면 render() 수명 주기 메서드가 return() 문 내에서 모달 표시를 처리합니다.

import React, { Component } from "react";

class Dashboard extends Component {
  // ...
  render() {
    return (
      <main>
        <h1>React Modal</h1>
        <button type="button" onClick={this.showModal}>
          Open
        </button>
      </main>
    );
  }
}

export default Dashboard

버튼은 React JSX 속성 onClick을 허용하여 .showModal() 함수를 적용하고 모달을 엽니다. Dashboard 구성 요소를 루트 HTML 파일에 연결된 상위 App 구성 요소로 내보냅니다.

2단계 - 모달 구성 요소 구축

새 파일 Modal.js를 만들고 세 개의 인수 handleClose, show를 사용하여 상태 비저장 기능 Modal 구성 요소를 선언합니다. , 및 자식. 인수 show는 상태의 show 속성을 나타냅니다.

import './modal.css';

const Modal = ({ handleClose, show, children }) => {
  const showHideClassName = show ? "modal display-block" : "modal display-none";

  return (
    <div className={showHideClassName}>
      <section className="modal-main">
        {children}
        <button type="button" onClick={handleClose}>
          Close
        </button>
      </section>
    </div>
  );
};

return() 문은 모달을 열고 닫는 기능에 대한 참조인 props.children로 표시되는 children 인수를 전달합니다. 모달에는 hideModal() 메서드(여기서는 handleClose 인수로 표시됨)를 허용하는 React JSX onClick 속성이 있는 버튼도 포함되어 있습니다. Dashboard 구성 요소에 소품으로.

showHideClassName 변수는 상태의 show 속성 값이 true인지 확인하기 위해 값을 조건부로 할당합니다. 그렇다면 모달이 나타납니다. 그렇지 않으면 모달이 숨겨집니다. 모달을 표시하고 숨기는 display-block 및 display-none 속성은 로 가져온 modal.css 파일을 통해 처리됩니다. 모달 구성 요소.

새 파일 modal.css를 시작하고 규칙을 설정하여 Modal의 크기, 색상 및 모양 스타일을 지정합니다.

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width:100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
}

.modal-main {
  position:fixed;
  background: white;
  width: 80%;
  height: auto;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
}

.display-block {
  display: block;
}

.display-none {
  display: none;
}

이렇게 하면 흰색 상자 윤곽선과 음영 배경이 있는 중앙 모달이 생성됩니다. Modal 구성 요소가 완성되면 구성 요소를 Dashboard에 통합해 보겠습니다.

3단계 - 모달 구성 요소 통합

Modal을 Dashboard에 결합하려면 Dashboard.js 파일로 이동하여 Modal 구성 요소를 반응 인스턴스화:

import React, { Component } from "react";
import Modal from './Modal.js';

class Dashboard extends Component {
  // ...
  render() {
    return (
      <main>
        <h1>React Modal</h1>
        <Modal show={this.state.show} handleClose={this.hideModal}>
          <p>Modal</p>
        </Modal>
        <button type="button" onClick={this.showModal}>
          Open
        </button>
      </main>
    );
  }
}

export default Dashboard

return() 문에 Modal 구성 요소를 포함하여 모달을 표시하거나 숨깁니다. 속성 show 및 handleClose는 상태 및 hideModal()Modal 구성 요소의 소품입니다. > 기능.

이제 Dashboard 및 Modal 구성 요소가 브라우저에서 렌더링됩니다.

이제 새 Modal 구성 요소가 어떻게 열리고 닫히는지 관찰하십시오.

결론

이 튜토리얼에서는 한 구성 요소에서 다른 구성 요소로 소품과 기능을 전달하여 모달을 구현하는 데 React를 사용하는 방법을 배웠습니다.

이 프로젝트를 라이브로 보려면 여기 이 프로젝트의 CodePen 데모가 있습니다.