반응형
tooltip
-
[React] Container Component 제작 - ClickOutside, TooltipFront-End(Web)/React - 프레임워크(React, Next) 2022. 7. 5. 02:10
이번 포스팅 역시 과제를 진행하면서 새로이 경험한 React 개발내용을 복기하면서 정리하는 글이다. 하나는 요소에 마우스를 호버했을 때 표현되는 툴팁, 다른 하나는 박스 외부를 클릭했을 때 닫히는 Click-Outside 기능이다. 기능적으로 연관성은 없으나, 코드상으로 둘 다 Container Component를 사용했다는 공통점이 있다. 또한, 회사에서는 둘 다 Vue의 Custom Directive로 구현되었는데, React에서는 어떻게 구현할지 리서치해보니 생각보다 컨테이너로 쉽게 구현이 되어서 이를 소개해보려고 한다. 💙 Click Outside 구현 위처럼, 특정버튼을 누르면 팝업창이 표현되고, 창 외부를 클릭하면 닫히는 UX를 제공하기 위한 기능이다. 검색창의 자동완성창, 프로필 등 클릭시 ..