[ React ] React에서 slot 사용하기

Vue3에서는 v-slot을 통해 간편하게 slot을 사용할 수 있었다.

 

그렇다면 React에서는 어떻게 slot을 구현할까?

 

 

사용처(?)

공통 컴포넌트 중 Modal을 만들다가, Head와 Footer는 공통적이면서도 Content 영역만 가변적으로 사용되게 하고 싶었다.

 

 

방법

기본 컴포넌트 (예: <div>) – React

 

JSX를 props로 전달해서 사용할 수 있다 ㄷㄷㄷㄷ

 

 

 

구현 코드

interface Props {
  title: string;
  onCancel: () => void;
  onApply: () => void;
  bodyContent: JSX.Element;
}

export default function CommonModal({
  title,
  onCancel,
  onApply,
  bodyContent,
}: Props) {
  return (
    <ModalContainer>
      <ModalHead>
        <SubTitle>{title}</SubTitle>
      </ModalHead>
      <ModalBody>{bodyContent}</ModalBody>
      <ModalFooter>
        <CancelBtn onClick={onCancel} />
        <ColoredBtn children="신청하기" color="Blue" onClick={onApply} />
      </ModalFooter>
    </ModalContainer>
  );
}

적용한 결과,

 

bodyContent라는 props를 받아와서 원하는 영역에 변수를 참조하듯 붙여주면 잘 적용된다.

이때 type은 JSX.Element를 적용해주면 된다.

 

 

 

가능한 이유

JSX는 자바스크립트 객체로 컴파일되기 때문에 다른 props와 동일하게 변수에 할당하거나 다른 자바스크립트 표현식에 사용할 수 있다.

그렇기 때문에 위의 방법으로 JSX를 {} 를 통해 변수에 할당해 slot을 구현할 수 있는 것이다.