20220123_실습 - Githubissues

-app.js-

import React, { useRef } from "react";
import "./styles.css";
import Input from "./components/Input";

// 요구사항
// 1. 아이디와 비밀번호를 입력받을 input 구현 (input 컴포넌트 재사용 할 수 있게 만들기)
// 2. 아이디 validation : English, Number Only
// 3. 비밀번호 validation : 8자 이상 20자 이하
// 4. onFocus 처리
// 4. App 컴포넌트 안에서 input value 값들을 전송

export default function App() {
  const idRef = useRef();
  const passRef = useRef();

  const idValid = () => {
    const idVal = idRef.current.value;
    var letterNumber = /^[0-9a-zA-Z]+$/;
    if (idVal.match(letterNumber)) {
      return true;
    } else {
      alert("아이디는 영문자 및 숫자로 이루어져야합니다.");
      idRef.current.focus();
      return false;
    }
  };

  const passValid = () => {
    const passVal = passRef.current.value;
    if (passVal.length < 8 || passVal.length > 20) {
      alert("비밀번호는 8~20자리로 해주세요.");
      passRef.current.focus();
      return false;
    }
    return true;
  };

  const onClickSend = () => {
    if (!idValid()) return;
    if (!passValid()) return;
    const idVal = idRef.current.value;
    const passVal = passRef.current.value;
    alert(`성공적으로 저장되었습니다.\nID:${idVal}\nPASS:${passVal}`);
  };

  return (
    <div className="App">
      <h1>Wellcome!</h1>

      <Input forwardedRef={idRef} title="아이디" />
      <Input forwardedRef={passRef} title="비밀번호" />
      <button onClick={onClickSend}>SEND</button>
    </div>
  );
}

-input.jsx-

import styled from "styled-components";

const Input = (props) => {
  return (
    <Wrapper>
      <label>{props.title}</label>
      <input ref={props.forwardedRef} />
    </Wrapper>
  );
};

export default Input;

const Wrapper = styled.div`
  height: 50px;

  label {
    font-size: 20px;
    font-weight: bold;
    margin-right: 6px;
  }
`;

Better-React / ReactBestPractice

20220123_실습 #2