리액트는 index.html에서 "root"라는 id를 가진 div에 App.js를 렌더링 시켜 사용자에게 보여줄 화면을 정의한다. 즉, 모든 리액트 컴포넌트/페이지가 root라는 컨테이너 안에 담기게 된다. 그런데 서비스를 만들다보면 modal, dialog, overlay 등 메인 컨테이너가 아닌 별도의 컨테이너에 내용을 담아야 하는 경우가 생긴다. 이 때 z-index만으로 화면을 구성해도 되지만, z-index에 대한 정의가 제대로 되지 않을 경우 원하는 결과가 나오지 않을 수 있다. 그래서 사용하는 것이 리액트의 Portal이다. Portals Portal은 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링하는 최고의 방법을 제공합니다. 1. Portal을 사용하지 않고..

React React는 Facebook에서 제공하는 프론트엔드 라이브러리이다. 주로 SPA(Single Page APplication)나 모바일 애플리케이션을 만들 때 사용된다. React를 사용하는 이유 1. Virtual DOM의 사용 DOM은 Document Object Model의 약자이며 HTML, XML, CSS 등을 트리 구조로 인식하고, 데이터를 객체로 간주하고 관리한다. 기존의 DOM은 페이지가 바뀔 때 마다, 새 HTML을 로드하면서 DOM 전체를 변경한다. React는 이 DOM Tree 구조와 같은 구조체를 Virtual DOM으로 가지고 있다. Virtual DOM은 가상의 Document Object Model을 말합니다. 실제 DOM을 제어하지 않고, 이벤트가 발생할 때 마다 ..