[리액트 React] '닫기' 클릭 시 팝업/모달 hide 하는 방법/How to close a modal in react

안녕하세요.

디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다.

 

이번 포스팅에서는

리액트에서 '닫기' 버튼 클릭 했을 때 팝업 혹은 모달을 hide 시키는 방법에 대해 알아보겠습니다.

즉, 모달 혹은 팝업을 닫는 거죠.

 

이 방법을 사용하면 라이브러리를 사용하지 않고도

리액트에서 간단하게 팝업 혹은 모달을 구현할 수 있어요.

 

 

  1. 먼저 Popup.js를 만들어 줍니다.

props에 onClose를 담아줄 거예요.

style은 자유롭게 작업해 주세요.

import React, { useState } from 'react';
import './css/Popup.scss';

const Popup = (props) => {
    const { onClose } = props;
    return (
        <div className="popWrap">
            <div className="popBox">
                <div>
                	팝업 컨텐츠는 여기에
                </div>
                <div className="btnWrap">
                    <div className="btn" onClick={() => { onClose(false) }}>
                        닫기
                    </div>
                </div>
            </div>
        </div>
    )
}

export default Popup

 

 

 

  Popup.js 컴포넌트를 불러올,
  부모 컴포넌트에 아래와 같이 코드를 작성해 주세요.

useState로 popup 상태를 정합니다.

true일 경우 Popup 컴포넌트를 보여주고, false일 경우 null을 반환하여 팝업을 숨깁니다. (창 닫기)

import React, { useState } from "react";
import Popup from './Popup';

export default function FullPageLanding() {
	const [ popup, setPopup ] = useState(true); 
    
    return (
    	<>
        	{popup ? <Popup onClose={setPopup} /> : null}
        </>
    )
}