React의 포털 및 useRef

파운데이션 시간 동안 공부하고 배운 내용을 메모할 예정입니다.

이 메모는 Brian Holt의 Front End Masters 과정 "Complete Intro to React, v7"을 시청하면서 작성한 것입니다.

포털이란 무엇입니까?

포털은 React 앱에 대해 앱이 배치되는 실제 DOM(색인 HTML의 루트)과는 별개인 마운트 지점입니다.

이에 대한 일반적인 사용 사례는 모달(팝업되는 하위 창)입니다.

포털 추가

먼저 별도의 마운트 지점을 사용하여 모달을 index.html에 추가합니다.

<!-- above #root -->
<div id="modal"></div>

Modal.js라는 새 파일을 만듭니다.

import React, { useEffect, useRef } from "react";
import { createPortal } from "react-dom";

const Modal = ({ children }) => {
  const elRef = useRef(null);
  if (!elRef.current) {
    elRef.current = document.createElement("div");
  }

  useEffect(() => {
    const modalRoot = document.getElementById("modal");
    modalRoot.appendChild(elRef.current);
    return () => modalRoot.removeChild(elRef.current);
  }, []);

  return createPortal(<div>{children}</div>, elRef.current);
};

export default Modal;

div 컨테이너는 포털 내부에서 렌더링되는 것입니다.

DOM의 포털 지점에 렌더링해야 합니다.

나중에 div를 제거해야 합니다. 함수를 반환하면 됩니다. 이 함수는 Modal이 사라지면 호출됩니다.

심판이란 무엇입니까?

모든 렌더링에서 동일한 것을 참조하려는 경우 ref를 사용합니다.

기본적으로 현재 속성이 있는 개체에 대한 포인터이며 ref를 업데이트하면 현재 속성이 업데이트됩니다.

상태 변수와 달리 구성 요소 렌더링 주기와 완전히 분리되어 있으므로 구성 요소가 다시 렌더링되지 않습니다.

모달 토글용 코드 추가

// at the top
import Modal from "./Modal";

// add showModal
state = { loading: true, showModal: false };

// above render
toggleModal = () => this.setState({ showModal: !this.state.showModal });

// add showModal
const { animal, breed, city, state, description, name, images, showModal } =
  this.state;

// add onClick to <button>
<button onClick={this.toggleModal} style={{ backgroundColor: theme }}>
  Adopt {name}
</button>;

// below description
{
  showModal ? (
    <Modal>
      <div>
        <h1>Would you like to adopt {name}?</h1>
        <div className="buttons">
          <a href="https://bit.ly/pet-adopt">Yes</a>
          <button onClick={this.toggleModal}>No</button>
        </div>
      </div>
    </Modal>
  ) : null;
}