노드버드 리뉴얼 강의 정리 #11 로그인 폼 만들기

jakeseo_me·2020년 7월 26일
0

노드버드리뉴얼

목록 보기
12/14

노드버드 리뉴얼 강의 정리 #11 로그인 폼 만들기

Prologue

노드버드에서 배운 지식들로 레퍼런스를 만들어보자.

주요 내용

Component & Container

예전에 리액트 개발을 할 때는 컴포넌트와 컨테이너를 나누는 경우가 많았음.

Component는 순수하게 화면을 보여주는 내용을 넣었고, 데이터를 다루는 부분은 Container에 넣었었음.

하지만 Hooks 이후에는 컴포넌트와 컨테이너를 구분하는 것을 추천하지 않음.

그래서 이번 강좌에서는 components 폴더에만 컴포넌트를 넣을 예정임.

일어났던 버그

이렇게 맞게 작성했는데, TS2451: Cannot redeclare block-scoped variable 'LoginForm'. 에러가 떴었음 사실 원인이 무엇이었는지는 모르겠는데 아마 tsconfig.json이 잘 안 읽어졌거나 했을 것같다.

어찌됐던 그냥 파일을 껐다가 키니 에러가 사라졌다.

주의해야 할 점

  1. Component에 Props로 넣는 함수에는 항상 UseCallback을 이용해야 최적화가 됨 꼭 콜백은 UseCallback 써주자

결과 코드

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

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

  const onChangeId = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
    setId(e.target.value);
  }, []);

  const onChangePassword = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
    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>
            <Button>회원가입</Button>
          </a>
        </Link>
      </div>
    </Form>
  );
};

export default LoginForm;
profile
대전에 있는 (주) 아이와즈에서 풀스택 웹개발자로 일하고 있는 서진규입니다. 주로 Jake Seo라는 닉네임을 많이 씁니다. Javascript를 좋아합니다.

0개의 댓글