[React & 가계부프로젝트] 모달만들기 props.children ( v-slot 같은 개념 만들어보기)

모달 컴포넌트

//Modal 컴포넌트
import React, { ReactNode } from 'react';

type Props = {
  children: ReactNode;
};

function ModalComponent(props: Props) {
  const { children } = props;
  return (
    <article className="modal">
      <div className="modal__mask">딤영역</div>
      <main className="modal__inner">
        <header className="modal__header">
          <h2 className="modal__title">제목</h2>
        </header>
        <div className="modal__content">{children}</div>
      </main>
    </article>
  );
}

export default ModalComponent;

vue에서는 v-slot을 사용하여 안에 내용을 커스텀 하게 해줄 수 있는데,
react에서는 태그안에 무언가를 넣어서 쓰면 그게 props.children으로 전달이 된다고 한다.
그래서 그 내용을 modal의 content 안에 넣어주었다. (+ 제목과 닫는이벤트는 props로 따로 받아 처리하였다)

 

 

모달 사용할 페이지

import ModalComponent from '../../components/Modal';

<ModalComponent>
  <p className="Dialog-message">가계부 상세 내용</p>
</ModalComponent>

모달 사용하는 페이지에서 ModalComponent안에 p태그를 넣어 전달하였다.

 

 

실제 렌더링된 모습

<article className="modal">
  <div className="modal__mask">딤영역</div>
  <main className="modal__inner">
    <header className="modal__header">
      <h2 className="modal__title">제목</h2>
    </header>
    <div className="modal__content">
        <p className="Dialog-message">가계부 상세 내용</p>
    </div>
  </main>
</article>

이렇게 { children }으로 선언했던 부분이 p태그로 바뀌어 렌더링 되는것을 확인할 수 있다.