react 로 만드는 트위터 클론 코딩 - 6(더미데이터 로그인)

<ButtonWrapper>
  <Button type="primary" htmlType="submit" loading={false}>
  	로그인
  </Button>
  <Link href="/signup">
  	<a>
  		<Button>회원가입</Button>
  	</a>
  </Link>
</ButtonWrapper>

 

Button 에서 submit 이 발생하면 Form 에서 onFinish 가 발생합니다.

 

<Form onFinish={onSubmitForm}>

const onSubmitForm = useCallback(() => {}, []);

 

onFinish 는 자동으로 e.preventDefault() 가 적용이 되어 있습니다. 그래서 따로 해주실 필요가 없습니다.

 

const LoginForm = ({ setIsLoggedIn }) => {
  const [id, setId] = useState('');
  const [password, setPassword] = useState('');
  const onChangeId = useCallback((e) => {
    setId(e.target.value);
  }, []);
  const onChangePassword = useCallback((e) => {
    setPassword(e.target.value);
  }, []);

  const onSubmitForm = useCallback(() => {
    console.log(id, password);
    setIsLoggedIn(true);
  }, [id, password]);

 

setIsLoggedIn은 부모에서 받아옵니다.

 

AppLayout.js

<Col xs={24} md={6}>
  {isLoggedIn ? (
  <UserProfile />
  ) : (
  <LoginForm setIsLoggedIn={setIsLoggedIn} />
  )}
</Col>

 

그리고 더미데이터로 로그인을 한뒤 프로필 화면을 만들어줍니다.

 

UserProfile.js

import React, { useCallback } from 'react';
import { Card, Avatar, Button } from 'antd';

const UserProfile = ({ setIsLoggedIn }) => {
  const onLogout = useCallback(() => {
    setIsLoggedIn(false);
  }, []);
  return (
    <Card
      actions={[
        <div key="twit">
          잭잭
          <br />
        </div>,
        <div key="follings">
          팔로잉
          <br />0
        </div>,
        <div key="follwers">
          팔로워
          <br />0
        </div>,
      ]}
    >
      <Card.Meta avatar={<Avatar>HJY</Avatar>} title="종윤" />
      <Button onClick={onLogout}>로그아웃</Button>
    </Card>
  );
};

export default UserProfile;

 

마찬가지로 UserProfile.js 도 부모로 부터 useState 객체를 받아와 로그아웃 버튼을 클릭하면 로그아웃이 되게끔 만들어 줍니다.