Portals

언제 까지 부모 컨포넌트 아래에 jsx, tsx를 렌더링 할 것인가

이 지겨운 일상에서 탈출 시켜줄 portals를 소개해 드리겠습니다.

 

Portals란?

리액트 16 버전 이상에서 도입된 기능으로 React 컴포넌트를 다른 DOM 노드에 렌더링할 수 있게 해주는 기능.

이것을 사용하면 현재 컴포넌트 트리 외부의 DOM 요소에 렌더링 해줄 수 있음 아래 코드펜에서 확인해 보자

See the Pen portals by SeungYn (@SeungYn) on CodePen.

 

사용법은 아래 코드처럼 ReactDOM.createPortal()인자에 첫번 째로는 jsx를 두번 째로는 렌더링할 부모 노드를 넣어주면 된다.

function Portal(){
  return ReactDOM.createPortal(<div>포탈생성됨</div>, document.querySelector('#root'));
}

 

이제 포탈은 게임만 떠올랐는데(난 안해봄) 리액트도 떠오르게 되었다.