반응: 클래스 구성 요소에서 모달 사용

이전 블로그에서 기능적 구성 요소에서 모달을 사용하는 방법을 설명했습니다. 모달에 대한 나의 집착은 계속되고 있으므로 이제 클래스 구성 요소에서 모달을 사용할 수 있는 방법 중 하나를 살펴보겠습니다!

먼저 기본 반응 클래스 구성 요소로 시작하십시오.

import React, { Component } from 'react'

class ModalInClassComponents extends Component {
    render() {
        return (
            <div>

            </div>
        )
    }
}

export default ModalInClassComponents;

이제 터미널에서 npm install react-responsive-modal를 설치하고 구성 요소에서 modal 및 style.css를 가져오려고 합니다.

import { Modal } from 'react-responsive-modal';
import 'react-responsive-modal/styles.css';

모달이 초기에 닫힌 상태를 유지하도록 상태를 만듭니다.

state ={
    openModal : false
}

onClick 속성으로 버튼을 생성합니다. openModal 상태를 true 로 설정하는 버튼을 클릭하면 함수를 호출합니다.

<button onClick={this.onClickButton}>Click Me</button>

onClickButton = e =>{
        e.preventDefault()
        this.setState({openModal : true})
}

이제 Modal 구성 요소를 사용하고 open 및 onClose 두 가지 특성을 추가해야 합니다.open 는 this.state.openModal 로 설정되므로 상태가 true 일 때 모달이 열립니다.onClose 는 onClick 와 같은 방식으로 작동하지만 이 경우 상태를 다시 false 로 설정하려고 합니다.

<Modal open={this.state.openModal} onClose={this.onCloseModal}>
//Here you can add anything you want to reveal when the button is clicked!
       <h1>You Did it!</h1> 
</Modal>

onCloseModal = ()=>{
        this.setState({openModal : false})
}

그리고 그게 다야! 이제 모달을 볼 수 있습니다.



나는 모달이 당신의 앱에 약간의 매력을 더하고 매우 간단하고 사용하기 쉽기 때문에 좋아합니다.

전체 코드는 다음과 같습니다.

import React, { Component } from 'react'
import { Modal } from 'react-responsive-modal';
import 'react-responsive-modal/styles.css';

class ModalInClassComponents extends Component {

    state={
        openModal : false
    }

    onClickButton = e =>{
        e.preventDefault()
        this.setState({openModal : true})
    }

    onCloseModal = ()=>{
        this.setState({openModal : false})
    }

    render() {
        return (
            <div>
                <button onClick={this.onClickButton}>Click Me</button>
                <Modal open={this.state.openModal} onClose={this.onCloseModal}>
                    <h1>You Did it!</h1>
                </Modal>   
            </div>
        )
    }  
}

export default ModalInClassComponents;

끝까지 잘해주셔서 감사합니다!