[리액트]portal

✍🏻유데미 리액트 강좌를 보고 정리한 내용입니다.

 

Portal 사용법

ReactDOM.createPortal(child,container)

child : 엘리멘트,문자열 등 렌더링 가능한 리액트의 요소나 컴포넌트가 온다.

container : DOM엘리먼트 즉, 이동하고 싶은 위치를 지정한다.

 

모달 예제

강의에서 모달을 구현해보면서 어떤식으로 동작하는지 연습 할 수 있었다.

index.html에서 이동할 위치를 지정해준다.

Modal.js에 Backdrop,ModalOverlay,Modal 컴포넌트를 만들어준다.

//Backdrop컴포넌트
const Backdrop = (props) => {
  return <div className={classes.backdrop} />;
};
//ModalOverlay컴포넌트
const ModalOverlay = (props) => {
  return (
    <div className={classes.modal}>
      <div className={classes.content}>{props.children}</div>
    </div>
  );
};

const portalElement = document.getElementById("overlays");

const Modal = (props) => {
  return (
    <Fragment>
      {ReactDOM.createPortal(<Backdrop />, portalElement)}
      {ReactDOM.createPortal(
        <ModalOverlay>{props.children}</ModalOverlay>,
        portalElement
      )}
    </Fragment>
  );
};

 

Backdrop은 검은 화면을 만들어주고, Modaloveray는 childer속성을 사용하고있다.

처음 index.html에 만들었던 목적지 'overlays'를 protalElement변수에 담아 주었다.

Backdrop과 Modaloveray를 Modal컴포넌트에서 목적지로 보내주고있다.

 

 

 

이제 사용해볼 곳에서 Modal 컴포넌트로 감싸주고, App에서 호출을 하게되면 

 

이런식으로 모달 화면이 출력된다.

 

 

HTML구조를 확인해보면 root에서 벗어나 overlays에 들어간 것을 확인해 볼 수 있다.