질문입니다!

Question

안녕하세요 제로초님. 수강 중인 강의 내용과는 별개로 질문 좀 드려도 괜찮을까요? 제로초님 react nodebird 수강 중 강의 내용을 복습삼아 개인적으로 프로젝트를 진행해보는 중인데요, 초기에 레이아웃 구조를 만드는 중에 문제가 있어 질문드립니다. 현재 next 의 _app.js 에 AppLayout을 넣어주는 구조는 동일하게 가져갔으나 메뉴 중 user 라는 메뉴를 클릭 시 modal 을 출력하게 하여 로그인 폼을 따로 보여주고 싶은데요, AppLayout.js 코드 내에 아래와 같이 modal을 넣어주었고, modal 출력은 하는데 cancel 혹은 OK 버튼 클릭 시 useState로 modal의 visible을 false로 바꿔 modal을 닫는 동작이 안되네요 import React , { useState , useCallback } from "react" ; import { Menu , Layout , Icon , Col , Modal } from "antd" ; import PropTypes from "prop-types" ; const AppLayout = ({ children }) => { const { SubMenu } = Menu ; const { Header , Sider } = Layout ; const [ modalVisible , setModalVisible ] = useState ( false ); const showModal = useCallback (() => { setModalVisible ( true ); console . log ( "showModal: " + modalVisible ); }, []); const handleModal = useCallback (( e ) => { setModalVisible ( false ); console . log ( "handleModal: " + modalVisible ); }, []); return ( < Layout > < Header className = "header" style = { { backgroundColor: "#001a4d" } } > < div className = "logo" /> < Menu theme = "dark" mode = "horizontal" style = { { lineHeight: "64px" } } > < h1 style = { { color: "white" } } > < Col xs = { 24 } md = { 6 } > < Layout style = { { minHeight: "100vh" } } > < Sider width = { 200 } collapsible style = { { backgroundColor: "#ffffff" } } > < Menu mode = "inline" defaultSelectedKeys = { [ "1" ] } defaultOpenKeys = { [ "sub1" ] } > < Menu.Item key = "1" onClick = { showModal } > < Icon type = "user" /> < span > User { < Modal title = "Login Form" visible = { modalVisible } onOk = { handleModal } onCancel = { handleModal } > < p > Some contents } < Col xs = { 24 } md = { 18 } > { children } ); }; AppLayout . propTypes = { children: PropTypes . node }; export default AppLayout ; _app.js 에 들어간 AppLayout에서 modal 을 바로 출력하는 것 자체가 잘못된 걸까요? 로그로 modal 출력/cancel버튼 클릭 시 state 값을 확인해보니 false 로만 출력이 됩니다. 혹시 이상한 점이 있을까요??

leejg · Answer

아...감사합니다!

zerocho · Answer

Modal을 Menu.item 바깥으로 빼시면 됩니다.

leejg · Answer

답변 감사드립니다. 말씀대로 Menu.item 말고 그 내부에 Icon 이나 span 에 onClick 이벤트로 Modal 을 호출하니 잘 되네요. 이 방법은 Menu.item 범위 내의 Icon 이나 span 내용 범위만 클릭해야 Modal 을 출력해서 조금 부자연스러운데, 혹시 Menu.item 자체를 클릭했을 때 Modal을 출력할 다른 방안이 있을까요..?

zerocho · Answer

Menu.item 밑에 Modal이 들어있어서 그럽니다. 이벤트 버블링현상입니다. Modal의 onclick 실행 후, menu.item의 onclick이 다시 실행됩니다. 그래서 handleModal 후 showModal이 바로 실행됩니다.