[React] Popup 불러오기

https://min-ji07.tistory.com/entry/React-%ED%8E%98%EC%9D%B4%EC%A7%80-%EC%9D%B4%EB%8F%99-props-%EB%A0%8C%EB%8D%94%EB%A7%81?category=926976 

[React] 페이지 이동, props 렌더링

 

 

적당히 팝업 모양을 만들어 준 후 위 페이지 참고해서 불러온다 !

팝업 관련 내용 ( 팝업 열고 닫기 등 )을 추가 해주면 됨

 

import React from 'react';
import 지정텍스트 from '파일위치';
// import Popup from './Popup';

const Main = (props: {}) => {
  const {} = props;
  const [popup, handlePopup] = useState(false);
  // false --> 팝업 비활성화
  return(
      <div>
        ~ 본문 내용 ~
        ~
        ~ ~
        ~
        // 버튼 클릭시 팝업 활성화
        <button type="button"
          onClick={() => {
            handlePopup(true);
            // true --> 팝업 활성화
            }}>
            팝업켜기
        {popup && <Popup onClose={handlePopup} />}
        // 팝업 컴포넌트 내에 팝업 닫는 변수? 가 있어야함
      </div>
  )

 

팝업 컴포넌트

import React from 'react';

const Popup = (props: { onClose: any; }) => {
  const { onClose } = props;
  // 팝업 닫기
  
  return (
   <div>
     팝업 내용
   </div>
   );
 }
 
 export default Popup;

 

 

따란