| 요약 |
팝업을 네이티브로 접근하는 api가 나왔다!
2025 기준으로 범용성이 떨어지는 것도 아니어서 다음 프로젝트에 해볼만 하겠다.
attribute
- popovertarget : 타겟팅
- popovertargetaction="show" — Show the popover element
- popovertargetaction="hide" — Hide the popover element
- popovertargetaction="toggle" — The default behaviour of showing/hiding the popover element.
스타일링
::backdrop
:popover-open
ex)
:root:has([popover]:popover-open) > body {
pointer-events: none;
user-select: none;
}
[popover]:popover-open {
pointer-events: auto;
user-select: auto;
}
JS API
- .showPopover() to show the popover.
- .hidePopover() to hide the popover.
- .togglePopover() to toggle the popover.
|
- useTransition : 비긴급 업데이트에 대한 로딩 상태 표시
- useDeferredValue : UI가 우선순위가 더 높은 업데이트를 처리할 때까지 값 업데이트를 지연, 비용이 많이 드는 계산이나 렌더링 작업시 유용
- useId : 서버와 클라이언트 간의 ID 충돌을 방지하여 접근성과 기능성 유지 보장
- useSyncExternalStore : 이 후크를 사용하면 외부 저장소(예: Redux)를 구독할 수 있으므로 구성 요소가 항상 외부 데이터 소스와 동기화 상태를 유지
- useInsertionEffect : 브라우저가 레이아웃 효과를 수행하기 전에 DOM에 동적 스타일을 주입하도록 설계되었습니다. 일반적으로 CSS-in-JS 라이브러리와 함께 사용
- useImperativeHandle : 자식 구성 요소의 특정 메서드를 부모 구성 요소에 노출하는 유연성을 제공하여 구성 요소의 동작을 더 잘 제어
- useDebugValue : React DevTools에 레이블을 표시하여 사용자 정의 후크 내부에서 무슨 일이 일어나는지 더 쉽게 파악 가능
|