로그인폼만들기

서버가 없는데 로그인폼을 만드려면, 더미 데이터를 만들어준다.

useState를 사용하여, 로그인된 상태라면, 프로필 화면을 보여주고
로그인된 상태가 아니라면, 로그인폼으로 보여준다.
AppLayout.js

import React, { useState } from 'react';

import UserProfile from '../components/UserProfile';
import LoginForm from '../components/LoginForm';

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

false 상태임으로, 로그인폼을 보여준다.

컴포넌트에 props로 넘기는 함수는 useCallback을 써줘야 최적화가된다.

LoginForm.js

import React, { useState, useCallback } from 'react';
import { Form, Input, Button } from 'antd';
import Link from 'next/link';

const LoginForm = () => {
  const [id, setId] = useState('');
  const [password, setPassword] = useState('');

  const onChangeId = useCallback((e)=>{
    setId(e.target.value);
  },[]);
  
  const onChangePassword = useCallback((e)=>{
    setPassword(e.target.value);
  },[]);

  return(
    <Form>
      <div>
        <label htmlFor="user-id">아이디</label>
        <br/>
        <Input 
          name="user-id" 
          value={id} 
          onChange={onChangeId} 
          required 
        />
      </div>
      <div>
        <label htmlFor="user-password">비밀번호</label>
        <br/>
        <Input
          name="user-password"
          type="password"
          value={password} 
          onChange={onChangePassword} 
          required 
        />
      </div>
      <div>
        <Button type="primary" htmlType="submit" loading={false}>로그인</Button>
        <Link href="/signup"><Button>회원가입</Button></Link>
      </div>
    </Form>
  )
}

export default LoginForm;