더미 데이터로 로그인

버튼에다가 htmlType submit을 붙어줘야 form이 submit이 되는데 submit이 되면 onFinish이 호출이 된다.

 

onFinish는 자동으로 e.preventDefault()가 적용이 되어있다. 그래서 antd에서는 e.preventDefault()를 쓰면 안된다.

// LoginForm.js

<Form onFinish={onSubmitForm}>



<Button type="primary" htmlType="submit" loading={false}>로그인</Button>

// antd에서 사용 x

  const onSubmitForm = () => {
    e.preventDefault();
  }
  
  return (
  	<Form onFinish={onSubmitForm}>
  )

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

 

LoginForm.js에서 setIsLoggedIn이 있는데 이것을 AppLayout.js에서 넘겨줄 것이다.

// AppLayout.js

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

// LoginForm.js

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 style = useMemo(() => ({ marginTop: 10}), []);

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

그러면 LoginForm에서 setIsLoggedIn(true)를 하는순간 즉 로그인을 하는 순간 AppLayout에서 isLoggedIn이 true로 바뀌게 된다. 가짜로 로그인을 시켜줄 수 있는 것이다.

// LoginForm.js

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

// AppLayout.js

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

 

antd 에서 card를 보자. 깔끔하게 하나의 컴포넌트로 나오는 것을 볼 수 있다. 인스타그램이나 페이스북 포스트 같은 것을 카드 컴포넌트로 하면 좋다.  아래에서 key를 붙인 이유는 배열안에 들어있어서 key를 넣어주었다.

 

리액트에서 배열로 jsx 쓸때는 key를 넣어주어야 한다.

// UseProfile.js

import React from 'react';
import { Avatar, Card } from "antd";
import { Button } from 'antd/lib/radio';

const UserProfile = () => {
  return (
    <Card
      actions={[
        <div key="twit">짹짹<br />0</div>,
        <div key="followings">팔로잉<br />0</div>,
        <div key="follower">팔로워<br />0</div>,
      ]}
    >
      <Card.Meta
        avatar={<Avatar>ZC</Avatar>}
        title="ZeroCho"
      />
      <Button>로그아웃</Button>
    </Card>
  );
}

export default UserProfile;

로그아웃을 하면 풀리게 해보자.

// UserProfile.js

const UserProfile = ({ setIsLoggedIn }) => {
  const onLogOut = useCallback(() => {
    setIsLoggedIn(false);
  }, []);

Form 태그를 FormWrapper로 바꿔서 스타일을 넣어주자.

// LoginForm.js

const FormWrapper = styled(Form)`
  padding: 10px
`;


<FormWrapper onFinish={onSubmitForm}>

 

 

 

 

 

 

<출처 조현영: [리뉴얼] React로 NodeBird SNS 만들기>

https://www.inflearn.com/course/%EB%85%B8%EB%93%9C%EB%B2%84%EB%93%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%A6%AC%EB%89%B4%EC%96%BC/dashboard

[리뉴얼] React로 NodeBird SNS 만들기 - 인프런 | 강의