패스트캠퍼스 챌린지 40일차 - 한 번에 끝내는 React의 모든 것 초격차 패키지 Online

수강 인증샷

---

패스트캠퍼스 챌린지란?

 패스트캠퍼스에서 진행하는 '50일 공부 루틴 챌린지' 행사로 50일 동안 매일 수강 인증샷과 함께 학습 기록을 게시글로 남기는 행사다.

---

40일차

 40일차에는 Part 1. React 기초 Ch 03. React 공식 문서로 디테일잡기(고급) 챕터에서 11. Portal 강의 내용에 대해 기록하려 한다.

 Part 1. React 기초 Ch 03. React 공식 문서로 디테일잡기(고급) 챕터에서 11. Portal 강의에서는 강의 제목 그대로 Portal이라는 개념에 대해 공부한다. Portal은 부모 컴포넌트의 DOM 계층 바깥 구조에 있는 DOM 노드로 자식을 렌더링하는 최고의 방법을 제공한다. 보통 컴포넌트 렌더링 메소드에서 엘리먼트를 반환할 때 그 엘리먼트는 부모 노드에서 가장 가까운 자식으로 DOM에 마운트 되는데 가끔은 DOM의 다른 위치에 자식을 삽입하는 것이 유용할 때가 있다. 예를 들어, dialogue나 팁같은 것들을 나타내고자 하는 경우가 있다. portal이 DOM 트리의 어디든 상관없이 존재할 수 있다 하더라도 일반적인 React 자식처럼 동작한다. 앞서 공부한 Context와 기능들이 자식이 portal이든 아니든 여전히 React 트리에 존재하기 때문에 정확하게 똑같이 동작한다. 이벤트 버블링도 이에 포함되는데 portal 내부에서 발생한 이벤트는 React 트리에 포함한 상위로 전파된다. portal에서 버블링된 이벤트를 부모 컴포넌트에서 확인하는 것은 본질적으로 portal에 의존하지 않는 조금 더 유연한 추상화 개발이 가능함을 나타낸다. 

---

본 게시글은 이벤트 참여를 위해 작성된 게시글입니다.

 

---

패스트캠퍼스 공식 홈페이지 : https://bit.ly/37BpXiC