개발자(진) 옞

  • 홈
  • 태그
  • 방명록

2025/06/01 1

[React 모달] e.stopPropagation()과 createPortal()

🍈 프롤로그 이번 주 블로그 주제로는 React로 모달을 구현할 때 알아두면 좋은 두 가지 개념,stopPropagation()과 createPortal에 대해 다뤄보려고 한다.모달을 구현하다 보면 내부를 클릭했는데 모달이 닫혀버린다든지,레이아웃이 깨진다든지 하는 상황을 한 번쯤 겪게 되는데,이 두 가지 개념을 제대로 이해하고 사용하면 이러한 문제들을 해결할 수 있다. 🍈 상황 우테코 레벨2 상품 목록 미션에서,장바구니에 담긴 상품 정보를 보여주는 모달을 구현했다. 닫기 버튼을 클릭해서 모달을 닫을 수는 있지만,UX를 고려해서 배경을 클릭했을 때도 모달이 닫히는 기능을 추가했다. 이후 리뷰어가 e.stopPropagation()을 사용하는 이유에 대해 질문해 주셨다.대충 어떤 역할을 하는지 짐작만 ..

Web 2025.06.01
이전
1
다음
더보기
프로필사진

개발자(진) 옞

새싹 🌱

  • 분류 전체보기 (75)
    • 코딩테스트 (61)
    • Kotlin (2)
      • 냉장고 앱 (2)
    • Web (6)
    • 트러블슈팅 ☄️ (4)
    • 우테코 (2)

Tag

백준, 그래프, 구현, 파이썬, 투포인터, 알고리즘, 프로그래머스, React, 백트래킹, 정렬, 우테코, 이분탐색, python, 브루트포스, 트러블슈팅, 문자열, 리액트, 그리디, BFS, 카카오테크부트캠프,

최근글과 인기글

  • 최근글
  • 인기글

최근댓글

공지사항

페이스북 트위터 플러그인

  • Facebook
  • Twitter

Archives

Calendar

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

방문자수Total

  • Today :
  • Yesterday :

Copyright © Kakao Corp. All rights reserved.

티스토리툴바