반응: 기능적 구성 요소에서 모달 사용

바로 지금 모달은 스타일을 쉽게 추가할 수 있기 때문에 저의 새로운 집착입니다!

이 예에서는 내가 좋아하는 애니메이션 목록을 표시하는 모달이 생성되었습니다!

먼저 버튼을 반환하는 간단한 함수 컴포넌트를 아래와 같이 생성합니다.

import React from 'react';

function ModalInFunctionalComponent (){

    return(
        <>
           <button>Click to View My Favourite Animes</button>
        </>
    )
}

export default ModalInFunctionalComponent

useState를 가져와서 모달을 열고 닫을 부울 값을 설정해야 합니다. 처음에는 modalIsOpen가 false로 설정됩니다.

그래서 onClick 속성을 버튼으로 설정하여 모달을 열고 한번 누르면 setModalIsOpenToTrue 함수가 호출되어 modalIsOpen를 true로 설정합니다.

import React, {useState} from 'react';

function ModalInFunctionalComponent (){

    const [modalIsOpen, setModalIsOpen] = useState(false);

    const setModalIsOpenToTrue =()=>{
        setModalIsOpen(true)
    }

    return(
        <>
           <button onClick={setModalIsOpenToTrue}>Click to View My Favourite Animes</button>
        </>
    )
}

export default ModalInFunctionalComponent

다음으로 modal을 사용하려면 modal: npm install react-modal를 설치한 다음 구성 요소에서 modal을 가져옵니다: import Modal from react-modal .
모달 구성 요소는 isOpen 속성이 있는 기능 구성 요소에서 반환됩니다. 또한 모달을 닫기 위해 setModalIsOpenToFalse를 호출하는 또 다른 버튼이 모달 구성 요소 내부에 추가됩니다.

마지막으로, 내가 가장 좋아하는 애니메이션 목록을 반환하고 모달 구성 요소 내에서 가져와 반환되는 또 다른 구성 요소를 만들었습니다!

import React from 'react'

function AnimeList () {

        return (
            <>
            <ul>
                 <h1>One Piece</h1>
                 <h1>Fullmetal Alchemist: Brotherhood</h1>
                 <h1>Naruto</h1>
                 <h1>Bleach</h1>
                 <h1>Haikyu!!</h1>
                 <h1>Kuroko no Basketball</h1>
                 <h1>My hero academia</h1>
                 <h1>One punch man</h1>   
            </ul>     
            </>
        )

}

export default AnimeList

import React, {useState} from 'react';
import Modal from 'react-modal';
import AnimeList from './Anime';


function ModalInFunctionalComponent (){

    const [modalIsOpen,setModalIsOpen] = useState(false);

    const setModalIsOpenToTrue =()=>{
        setModalIsOpen(true)
    }

    const setModalIsOpenToFalse =()=>{
        setModalIsOpen(false)
    }

    return(
        <>
            <button onClick={setModalIsOpenToTrue}>Click to Open Modal</button>

            <Modal isOpen={modalIsOpen}>
                <button onClick={setModalIsOpenToFalse}>x</button>
                <AnimeList/>
            </Modal>
        </>
    )
}
export default ModalInFunctionalComponent;

그게 다야! 모달이 작동해야 합니다!



이제 몇 가지 스타일링을 위해:

const customStyles = {
    content : {
      top                   : '50%',
      left                  : '50%',
      right                 : 'auto',
      bottom                : 'auto',
      marginRight           : '-50%',
      transform             : 'translate(-50%, -50%)',
      backgroundColor       : '#F0AA89'      
    }
};

모달 구성 요소에는 값이 style 인 customStyles 속성이 있습니다. onRequestClose 속성을 추가하여 modalIsOpen를 false로 설정할 수도 있습니다. 사용자가 'x' 버튼뿐만 아니라 모달 구성 요소 외부를 클릭하면 모달이 닫힙니다.

 <Modal isOpen={modalIsOpen} style={customStyles} onRequestClose={()=> setModalIsOpen(false)}>
       <button onClick={setModalIsOpenToFalse}>x</button>
       <AnimeList/>
 </Modal>

끝까지 만들어주셔서 감사합니다 :)