incodevelop

  • 홈

rootlayout 1

모달창 구현하기 - RootLayout에 위치 vs createPortal

🚨  TroubleShotting보이는 것과 같이 모달창이 다른 요소들보다 가장 상단에 와야하는데 가장 밑에 위치한다.문제 발생의 배경 - As Is처음에 모달창 구현법에 대해서 고민을 했다.React-dom에서 제공하는 createPortal을 사용할 것인가?vs RootLayout.tsx에서 Modal.tsx 컴포넌트를 가장 상단에 위치시킬 것인가? 두 방법의 원리를 생각해봤다.createPortal은(1) HTML에 모달이 될 컴포넌트와 모달이 렌더링 될 DOM 노드를 (ex. ) 미리 위치시킨다.(2) 모달창 열기를 실시하면, 미리 위치시킨 DOM 노드를 document.querySelector 또는 getElementById로 가져와서 그 위치에 모달창을 렌더링 한다.장점: 모달창을 렌더링하고..

TIL 2024.07.10
이전
1
다음
더보기
프로필사진

  • 분류 전체보기
    • TIL

Tag

useformstatus(), sharedworker, closure, revalidatepath(), 기존 데이터에 추가, websocket, 함수실행시점, useoptimistic(), webpack-loader, zod, api_url, 낙관적업데이트, usetransition(), rootlayout, deploy.yaml, next.js, intersection-observer없이, server-action, useformstate(), is there any way to add values to an array column with update?,

최근글과 인기글

  • 최근글
  • 인기글

최근댓글

공지사항

페이스북 트위터 플러그인

  • Facebook
  • Twitter

Archives

Calendar

«   2025/08   »
일 월 화 수 목 금 토
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.

티스토리툴바