Portal

장점

.App {
  background: cyan;
  width: 400px;
  height: 400px;
}

App 자식에 있으면 App의 css 속성내에서 좌우정렬 되는 모달을 확인하게 될것입니다.

const PortalModal = props => {
  // 모달이 마운트 될 엘리먼트. 루트 엘리먼트와 다른 곳이다.
  const modalRoot = document.querySelector("#modal-root")
  // 모달 앨리먼트를 modalRoot에 마운트할 것이다.
  return ReactDOM.createPortal(<Modal {...props} />, modalRoot)
}

PortalModal 컴포넌트는 엘리먼트를 반환하지 않습니다. 대신 createPortal이라는 react-dom이 제공하는 함수 호출 값을 반환합니다.

DOM 트리에서 빠져나온 모달 엘리먼트는 더 이상 App의 css 상속구조 영향을 받지 않습니다.

suspense

작업이 끝날때까지 컴포넌트의 렌더링을 중단시키고 다른 컴포넌트를 먼저 렌더링할 수 있습니다.

네트워크를 통해 비동기로 데이터를 가져오는 작업을 생각할 수 있습니다.

어떤 컴포넌트가 읽어야 하는 데이터가 준비되지 않았다고 리액트에 알려주는 새로운 매커니즘 입니다.

리액트는 JSX코드를 렌더링시 컴포넌트를 바로 호출합니다.

<UserList />

하지만 아래와 같이 Suspense로 감싸주면 컴포넌트의 렌더링을 특정 작업 이후로 미루고 그 작업이 끝날때까지 fallback속성으로 넘긴 컴포넌트를 대신 보여줄 수 있습니다.

<Suspense fallback={<Spinner />}>
  <UserList />
</Suspense>

그동안 리액트에서 비동기 데이터를 읽어서 처리하는 경우 비동기로 API를 호출하여 서버의 데이터를 가져온 이후에 데이터 수신 상태에 따라 UI를 제공하였습니다.