안녕하세요 제로초님. 수강 중인 강의 내용과는 별개로 질문 좀 드려도 괜찮을까요?
제로초님 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" }}
></Menu>
<h1 style={{ color: "white" }}></h1>
</Header>
<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</span>
{ <Modal
title="Login Form"
visible={modalVisible}
onOk={handleModal}
onCancel={handleModal}
>
<p>Some contents</p>
</Modal>}
</Menu.Item>
</Menu>
</Sider>
</Layout>
</Col>
<Col xs={24} md={18}>
{children}
</Col>
</Layout>
);
};
AppLayout.propTypes = {
children: PropTypes.node
};
export default AppLayout;
_app.js 에 들어간 AppLayout에서 modal 을 바로 출력하는 것 자체가 잘못된 걸까요? 로그로 modal 출력/cancel버튼 클릭 시 state 값을 확인해보니 false 로만 출력이 됩니다. 혹시 이상한 점이 있을까요??
