리액트 모달1 [react] 리액트 모달(modal) DOM tree, createPortal createPortal 모달은 사용자에게 항상 최우선으로 출력되어야 하는 경우가 많습니다. react의 DOM tree를 보면, 모든 컴포넌트가 최상위 컨테이너인 root()에 종속되는데, 모달의 경우에는 어느 컴포넌트에서 호출이 되어도 모든 컴포넌트 위에 존재합니다. 따라서 물리적인 구조상 root를 벗어나는 것이 더 깔끔할 수 있습니다. 모달 뿐만이 아니라 애플리케이션 내에서 리액트 코드를 부분적으로만 사용하는 경우에도 root 이외의 DOM tree를 구성해야 하는 경우가 있습니다. 이럴 때 createPortal을 사용하면 컴포넌트를 기존의 DOM tree에서 물리적으로 분리할 수 있습니다. 구문 react-dom 패키지의 createPortal을 사용해 줍니다. createPortal(child.. 2021. 3. 28. 이전 1 다음