[리액트]nodebird 섹션1. - 더미데이터로그인하기

form을 쓸때 e.preventDefault() 기본적으로 넣어주는데,
next에서는 쓰지 않는다.(이미 그 기능이 들어가져 있다.)

LoginForm.js

const LoginForm = ({ setIsLoggedIn }) => {
  const onSubmitForm = useCallback(() => {
    console.log(id, password);
    setIsLoggedIn(true)
  }, [id,password])
  
  return(
    <Form onFinish={onSubmitForm}>
    </Form>
  )

}

AppLayout.js

const AppLayout = ({ children }) => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  return(
    {isLoggedIn ? <UserProfile /> : <LoginForm setIsLoggedIn={setIsLoggedIn}/>}
  )
}

id, password를 입력해주면, setIsLoggedIn true 값으로 변경되어, 내프로필 화면이 보여진다.

---

UserProfile.js

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

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

<div key="twit">짹<br/>0</div>,
<div key="followings">팔로잉<br/>0</div>,
<div key="followings">팔로워<br/>0</div>,

리액트에서는 배열을 쓸때 key 값을 넣어야한다.

import React, {useCallback} from 'react';

const UserProfile = ({ setIsLoggedIn }) => {
  const onLogOut = useCallback(()=>{
    setIsLoggedIn(false);
  },[]);
  
  return(
   <Button onClick={onLogOut}>로그아웃</Button>
	)
}

AppLayout

const AppLayout = ({ children }) => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  return(
  {isLoggedIn ? <UserProfile setIsLoggedIn={setIsLoggedIn} /> : <LoginForm setIsLoggedIn={setIsLoggedIn}/>}
  )
}

로그아웃 버튼을 누르면, setIsLoggedIn 값이 false로 변경되어, 로그인폼이 노출되게 된다.

폼태그 간격주기(styled-components)

LoginForm.js

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

const LoginForm = ({ setIsLoggedIn }) => {
  return(
    <FormWrapper onFinish={onSubmitForm}>
    </FormWrapper>
  )
}