[TIL] 리액트 Portals

공지애·2022년 4월 21일
0

미니 프로젝트, 클론코딩에서 모달 구현을 할 때는 state값을 props로 넘겨서 자식 컴포넌트에서 값이 변하면 부모 컴포넌트도 렌더링 되는 방식으로 구현했는데, 이런 방식이 좋지는 않기 때문에 리액트에서 권장되는 방식인 Portals를 이용해 구현하게 되었다.

Portals

Portal은 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링하는 최고의 방법을 제공한다. 일반적으로 리액트는 부모 컴포넌트가 렌더링되면 자식 컴포넌트가 렌더링되는 tree 구조를 가지고 있다. 하지만 모달과 같이 부모-자식 관계를 가지고 있지만 독립적인 위치에서 렌더링을 하면 훨씬 편리한 경우가 있다. Portal을 통해 독립적인 구조와 부모-자식 관계를 동시에 유지할 수 있다면, z-index 등 부모 컴포넌트의 제약에서 벗어날 수 있다.

0개의 댓글