# portals

15개의 포스트

React Portals를 사용하여 모달과 오버레이를 보다 Semantic한 코드 작성하기

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

2023년 5월 1일
·
0개의 댓글
·
post-thumbnail

TIL Fragments / Portals

\-> Fragments는 DOM에 별도의 노드를 추가하지 않고 여러 자식을 그룹화프로젝트 코드를 작성할 때 <div>를 무의식적으로 많이 사용했는데<div>를 사용하면 HTML의 DOM 구조에도 <div>는 적용되기 때문에 <div>대신 frag

2022년 12월 12일
·
0개의 댓글
·

11.14 TIL Portals(modal)

React 공식 문서에 따르면 포털은 다음과 같다. PortalsPortal은 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링하는 최고의 방법을 제공합니다.외부에 존재하는 DOM노드를 React App DOM 계층에 존재하는 것 처럼 연결해주

2022년 11월 17일
·
0개의 댓글
·

Portals

Portal은 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링 하는 최고의 방법을 제공합니다.ReactDOM.createPortal(child, container)첫 번째 인자(child)는 엘리먼트, 문자열, 혹은 fragment와 같은 어

2022년 11월 16일
·
0개의 댓글
·
post-thumbnail

[React] JSX와 Portals

🤔 JSX와 portals? JSX? JS를 의미하는 건가? 뒤에 x과 붙은 건 무슨 의미일까 궁금해진다. portals은 react에서 어떻게 쓰이고 있는 걸까? 오늘의 공부 주제들은 흥미롭다. 예시를 학습하며 공부해보도록 하자. JSX UI를 가독성있게 짤 수

2022년 10월 19일
·
0개의 댓글
·
post-thumbnail

[React] portals로 모달 구현하기

컴포넌트를 원하는 DOM에 렌더링할 수 있는 방법.

2022년 9월 6일
·
0개의 댓글
·
post-thumbnail

React의 portal를 사용해보자

react에서 portal을 써보았다.

2022년 7월 31일
·
1개의 댓글
·

React - Portals

React Docs 정리

2022년 4월 26일
·
0개의 댓글
·

[TIL] 리액트 Portals

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

2022년 4월 21일
·
0개의 댓글
·

React (6) Fragments, Portals

Fragments, Portals

2022년 4월 11일
·
0개의 댓글
·
post-thumbnail

W2 - 기술정리 | React Portals

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

2021년 8월 8일
·
0개의 댓글
·
post-thumbnail

react-create-portal 에 대하여...

리액트 v16 에서 도입된 기능인 Portals! 한번 알아보도록 하자!!

2021년 3월 30일
·
0개의 댓글
·
post-thumbnail

리액트 - Portals 를 통한 부모 컴포넌트의 외부 DOM 에 컴포넌트 렌더링하기

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

2018년 11월 2일
·
7개의 댓글
·