🍒 Chae-ri Dev 🍒

  • 홈
  • 태그
  • 방명록

createPortal 1

[React] Portal 활용하여 모달 만들기

Portal이란?부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링을 해준다.즉, 컴포넌트의 상하 관계 구조를 가지고 있는 DOM 상에서 자식 컴포넌트를 부모 컴포넌트의 외부에 있는 다른 컴포넌트에 전달할 수 있도록 해준다. 리액트 프로젝트에서 해당 컴포넌트를 어디에 렌더링 시킬지,사전에 DOM을 선택하여 부모 컴포넌트 바깥에 렌더링해주는 기능이라고 생각하면 된다.ReactDOM.createPortal(child, container) ReactDom의 createPortal 메서드를 활용하여 포탈을 사용해 계층 밖으로 보낼 컴포넌트(child), 포탈로 이동할 목적지, DOM Element(container)를 인자로 넣어준다. 1. 모달이  렌더링할 위치 지정하기index.htm..

React 2025.01.19
이전
1
다음
더보기
프로필사진

🍒 Chae-ri Dev 🍒

채리의 개발 블로그 ٩( *˙0˙*)۶

250x250
반응형
  • 분류 전체보기 (89)
    • Frontend (4)
      • Package Manager (1)
      • ESLint (1)
      • Prettier (1)
      • 웹 서버 (1)
    • CS (9)
      • 운영체제 (7)
      • 네트워크 (2)
      • 데이터베이스 (0)
    • React (7)
    • NextJS (1)
    • JavaScript (6)
    • Css (1)
    • GSAP (1)
    • Python (3)
    • Algorithm (17)
      • Programmers (7)
      • BackJoon (1)
      • 알고리즘 정리 (9)
    • Cloud (1)
      • Docker (1)
    • OPIc (25)
      • 오픽노잼(IM) (16)
      • 오픽노잼(IH) (9)
    • file (2)
    • 프로젝트 (2)
    • 우리FIS아카데미 (6)
    • Git (2)
    • Etc (2)

Tag

글로벌소프트웨어캠퍼스, 운영체제, 우리에프아이에스, 우리FISA, algorithm, 오픽노잼, 우리FIS아카데미, react, 리액트, OPIC, k-디지털트레이닝, 클라우드서비스개발, 오픽, 알고리즘, 프로그래머스, OS, 파이썬, javascript, Python, Github,

최근글과 인기글

  • 최근글
  • 인기글

최근댓글

Archives

Calendar

«   2025/07   »
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31

방문자수Total

  • Today :
  • Yesterday :

Copyright © Kakao Corp. All rights reserved.

티스토리툴바