# portals
React Portals를 사용하여 모달과 오버레이를 보다 Semantic한 코드 작성하기
기존의 모달과 오버레이를 보면 app이라는 선택자를 가진 div태그 내부에 footer 컴포넌트 하단에 모달과 오버레이가 존재했다. 하지만 모달과 오버레이는 footer 하단에 존재하는 컴포넌트가 아니기 때문에 의미론적인 코드라고 볼 수 없다. React Portals

TIL Fragments / Portals
\-> Fragments는 DOM에 별도의 노드를 추가하지 않고 여러 자식을 그룹화프로젝트 코드를 작성할 때 <div>를 무의식적으로 많이 사용했는데<div>를 사용하면 HTML의 DOM 구조에도 <div>는 적용되기 때문에 <div>대신 frag
11.14 TIL Portals(modal)
React 공식 문서에 따르면 포털은 다음과 같다. PortalsPortal은 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링하는 최고의 방법을 제공합니다.외부에 존재하는 DOM노드를 React App DOM 계층에 존재하는 것 처럼 연결해주
Portals
Portal은 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링 하는 최고의 방법을 제공합니다.ReactDOM.createPortal(child, container)첫 번째 인자(child)는 엘리먼트, 문자열, 혹은 fragment와 같은 어

[React] JSX와 Portals
🤔 JSX와 portals? JSX? JS를 의미하는 건가? 뒤에 x과 붙은 건 무슨 의미일까 궁금해진다. portals은 react에서 어떻게 쓰이고 있는 걸까? 오늘의 공부 주제들은 흥미롭다. 예시를 학습하며 공부해보도록 하자. JSX UI를 가독성있게 짤 수
[TIL] 리액트 Portals
미니 프로젝트, 클론코딩에서 모달 구현을 할 때는 state값을 props로 넘겨서 자식 컴포넌트에서 값이 변하면 부모 컴포넌트도 렌더링 되는 방식으로 구현했는데, 이런 방식이 좋지는 않기 때문에 리액트에서 권장되는 방식인 Portals를 이용해 구현하게 되었다.Por

W2 - 기술정리 | React Portals
포탈이란 부모 컴포넌트와 자식 컴포넌트라는 관계는 유지되지만 자식 컴포넌트의 렌더링은 부모 컴포넌트 밖에 있는 DOM 노드에서 일어나도록 하는 기능이다. 즉 렌더링이 DOM 트리 계층 구조로부터 자유로워진다.

React 강좌) trendy React 4-0. React Portals 알아보기
React Portals을 소개하고 작성하는 방법을 알아봅니다.

리액트 - Portals 를 통한 부모 컴포넌트의 외부 DOM 에 컴포넌트 렌더링하기
Portals 는 리액트 프로젝트에서 컴포넌트를 렌더링하게 될 때, UI 를 어디에 렌더링 시킬지 DOM 을 사전에 선택하여 부모 컴포넌트의 바깥에 렌더링 할 수 있게 해주는 기능입니다.