chaeon1 님의 블로그

  • 홈
  • 태그
  • 방명록

2025/06/09 1

[React] Toast 컴포넌트 구현하기

✨ 핵심 기능재사용 가능한 useToast() 훅Framer Motion 적용React Portal을 사용해 DOM 트리 외부에 렌더링1️⃣ Toast 컴포넌트ReactDOM.createPortal을 이용해 Toast를 document.body에 직접 렌더링이렇게 하면 부모 컴포넌트의 CSS나 위치에 영향을 받지 않고 자유롭게 위치 지정 가능return ReactDOM.createPortal( {message} , document.body,);2️⃣ useToast Hook컴포넌트 어디서든 Toast 메시지를 쉽게 트리거할 수 있도록 커스텀 훅 작성필요한 곳에서 showToast(message)만 호출하여 사용import { useState, useCallback } fro..

카테고리 없음 2025.06.09
이전
1
다음
더보기
프로필사진

chaeon1 님의 블로그

chaeon1 님의 블로그 입니다.

  • 분류 전체보기 (24)
    • Study (9)
      • 모던 자바스크립트 Deep Dive (9)
    • ReadOn (2)
      • FE (1)
      • BE (0)
      • Git (1)

Tag

최근글과 인기글

  • 최근글
  • 인기글

최근댓글

공지사항

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.

티스토리툴바