로그인 폼 만들기

이제 로그인 창을 만들어 보자. 로그인을 했을 때는 사용자페이지로 넘어가는 작업이다.

 

서버가 없는데 로그인을 할 수가 없으니까 더미데이터를 쓰도록 한다.

가짜 데이터를 만들자.

상태를 저장할 수 있는 state를 사용한다.

 

로그인이 되어 있으면 사용자 프로필을 보여주고 로그인이 되어있지 않으면 로그인 폼을 보여주게 하자.

import React, { useState } from 'react';
import PropTypes from 'prop-types';


const AppLayout = ({ children }) => {
    const [isLoggedIn, setIsLoggedIn] = useState(false);
    return(
        <div>
            <Menu mode="horizontal">
                <Menu.Item>
                    <Link href="/"><a>노드버드</a></Link>
                </Menu.Item>
                <Menu.Item>
                    <Link href="/"><a>프로필</a></Link>
                </Menu.Item>
                <Menu.Item>
                    <Input.Search enterButton style={{ verticalAlign: 'middle' }}/>
                </Menu.Item>
                <Menu.Item>
                    <Link href="/"><a>회원가입</a></Link>
                </Menu.Item>
            </Menu>
            <Row gutter={8}>
                <Col xs={24} md={6}>
                    {isLoggedIn ? <UserProfile /> : <LoginForm />}
                </Col>

 

components 폴더에 LoginForm.js파일과 UseProfile.js파일을 만들고 불러온다.

// AppLayout.js


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

// LoginForm.js

const LoginForm = () => {

}

export default LoginForm;

// UserProfile.js


const UserProfile = () => {

}

export default UserProfile;

 

Form을 아래와 같이 수작업으로 만들지만 나중에 react form같은 라이브러리를 써서 이용하면 편리하다.

 

그리고 id와 onChangeId같이 컴포넌트에 props로 넘겨주는 것들은 useCallback을 이용해서 최적화가 되게한다.

// LoginForm.js


import React, { useCallback, useState } from 'react';
import { Button, Form, Input } 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"><a>회원</a></Link>
      </div>
    </Form>
  );
}

export default LoginForm;

 

 

 

<출처 조현영: [리뉴얼] 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 만들기 - 인프런 | 강의