React(Next.js) 열린 요소 외 영역 클릭해서 닫을 때, 의존성 고민

Question

어떠한 버튼을 클릭해서 어떤 창이 뜬다고 가정했을 때,state로 boolean을 주어 click이벤트로 조건부 렌더링을 해서 보여주고 있는데요.문제는 그 외의 영역을 클릭했을 때, false를 set하여 닫고 싶은데 컴포넌트라서 최상단의 app.tsx에서 state를 props해 처리하고 있습니다. 여기서 느끼는 문제는 의존성의 문제를 느껴서 이걸 고치고 싶은데 다른 방법이 있는지 여쭤봅니다 ㅜㅜ...

Gear · Answer

MUI 보고 참고하여 만들어보세요.아래와 같은 식으로 할 수 있겠지요export function Backdrop({ onClick }) { return (

); }import { Backdrop } from "./Backdrop"; export default function Modal({ open, onClose }) { if (!open) { return null; } return ( <>

모달

); }import { useState } from "react"; import Modal from "./modal/Modal"; import "./styles.css"; export default function App() { const [open, setOpen] = useState(false); return (

setOpen(false)} />

); }https://codesandbox.io/s/small-wildflower-h4nvpk

hellooo · Answer

https://github.com/imbhargav5/rooks/blob/main/packages/rooks/src/hooks/useOutsideClick.tshttps://rooks.vercel.app/docs/useOutsideClick

React(Next.js) 열린 요소 외 영역 클릭해서 닫을 때, 의존성 고민

2개의 답변

Q&A 목록