인프런 커뮤니티 질문&답변

leejg님의 프로필 이미지

작성한 질문수

React로 NodeBird SNS 만들기

질문입니다!

19.11.11 17:32 작성

·

200

0

안녕하세요 제로초님. 수강 중인 강의 내용과는 별개로 질문 좀 드려도 괜찮을까요?

제로초님 react nodebird 수강 중 강의 내용을 복습삼아 개인적으로 프로젝트를 진행해보는 중인데요, 초기에 레이아웃 구조를 만드는 중에 문제가 있어 질문드립니다.

현재 next 의 _app.js 에 AppLayout을 넣어주는 구조는 동일하게 가져갔으나 메뉴 중 user 라는 메뉴를 클릭 시 modal 을 출력하게 하여 로그인 폼을 따로 보여주고 싶은데요, AppLayout.js 코드 내에 아래와 같이 modal을 넣어주었고, modal 출력은 하는데 cancel 혹은 OK 버튼 클릭 시 useState로 modal의 visible을 false로 바꿔 modal을 닫는 동작이 안되네요

import React, { useStateuseCallback } from "react";
import { MenuLayoutIconColModal } from "antd";
import PropTypes from "prop-types";

const AppLayout = ({ children }) => {
  const { SubMenu } = Menu;
  const { HeaderSider } = Layout;
  const [modalVisiblesetModalVisible= 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 로만 출력이 됩니다. 혹시 이상한 점이 있을까요??

답변 4

0

leejg님의 프로필 이미지
leejg
질문자

2019. 11. 12. 13:17

아...감사합니다!

0

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

2019. 11. 12. 12:32

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

0

leejg님의 프로필 이미지
leejg
질문자

2019. 11. 12. 11:48

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

0

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

2019. 11. 11. 23:45

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

leejg님의 프로필 이미지

작성한 질문수

질문하기