[React] antd 모달로 로그인 창 구현(antd modal signin)

React 프로젝트 개발 구현

문제 상황

ant- design 으로 그냥 로그인 페이지, 그냥 모달 페이지는 많이 있는데 모달로 로그인 구현하는게 많이 힘들었다.. 

삽질 계속 하다가.. 나중에 까먹지 않게 남겨놓기..

처음에는 header안에 넣어놨는데 리액트니까 컴포넌트로 따로 빼놓자..해서 처음부터 다시 했다..

input창은 그냥 복사붙여넣기 하면 된다.(나중에 유효성 검사도 넣어야지)

- 배운 것 : 부모 컴포넌트 => 하위 컴포넌트로 props 값 넘기는 거는 알았는데 하위 컴포넌트 => 부모 컴포넌트로 state값 변경하는 것 알게 되었다! 함수로 사용했다!

 

1. Modal.js(하위 컴포넌트)

import React from 'react';
import { Modal, Input, Form } from 'antd';

export function SignInModal({ open, changeOpen }) {
  /** form 리액트 훅 */
  const [form] = Form.useForm();

  /** 폼 전송*/
  const handleSubmit = (values) => {
    console.log(values);
  };

  /** 취소  */
  const handleCancel = () => {
    console.log(open);
    changeOpen(!open);
  };

  return (
    <>
      <Modal
        open={open}
        title="로그인"
        okText="SignIn"
        cancelText="Cancel"
        onOk={form.submit}
        onCancel={handleCancel}
      >
        <Form form={form} onFinish={handleSubmit}>
          <Form.Item
            name="id"
            label="ID"
            rules={[
              {
                type: 'email',
                message: '이메일 형식으로 입력해주세요',
              },
              {
                required: true,
                message: '아이디를 입력해주세요',
              },
            ]}
          >
            <Input placeholder="아이디를 입력해주세요" />
          </Form.Item>
          <Form.Item
            name="password"
            label="Password"
            rules={[
              {
                required: true,
                message: '비밀번호를 입력해주세요',
              },
            ]}
            hasFeedback
          >
            <Input placeholder="비밀번호를 입력해주세요" />
          </Form.Item>
        </Form>
      </Modal>
    </>
  );
}

2. Header.js(상위 컴포넌트)

import React from 'react';
import { Button } from 'antd';
import { SignInModal } from '../components/Modal';
import { useState } from 'react';

export default function HeaderPart() {
  const [open, setOpen] = useState(false);

  // Modal.js로 state값을 변경하기 위해서 넘긴다.
  const changeOpen = (open) => {
    setOpen(open);
  };

  return (
    <nav>
      <Button onClick={() => {setOpen(true);}}>SignIn</Button>
      {open === true ? (<SignInModal open={open} changeOpen={changeOpen} />) : null}
    </nav>
  );
}