리액트 혼자연습하기

코드스테이츠 부트캠프 중 혼자 복습을 하면서

아직 리액트 단계는 아니지만 리액트를 혼자연습해보고있다.

머리가 깨질거같이 나에겐 어렵지만 좌절을 딛고 하나씩 해나가니 쪼금식은 만질줄은 알게된같다 남들은 이정도가 쉬워보일지도 모르지만 진짜 그냥 광야에 있는 느낌에서 시작한거기 때문에 나에게는 매우큰 성취감이다

혼자 만들어본 로그인화면 너무 복잡하게 만들려고 생각하지않고 기본적인 eventHandler 랑 useState , 그리고 props 를 이해하고싶어 만든 작은 프로젝트다 Css도 꾸며보고싶지만 우선은 블로깅하면서 체크를해보려고 글을쓴다

이렇게 만들어봤다.

코드첨부

import React, { useState } from "react";

const Prac = () => {
  const [message, setMessage] = useState("");
  const [password, setPassWord] = useState("");
  const onChangeMessage = (e) => setMessage(e.target.value);
  const onChangePassWord = (e) => setPassWord(e.target.value);

  const onClick = (e) => {
    if (message.length > 8 && password.length > 8) {
      alert("로그인성공");
    } else {
      alert("로그인실패 아이디와 패스워드를 확인해주세요");
    }
  };

  return (
    <div>
      <h1>Login</h1>
      <hr />
      <form>
        <fieldset>
          <ul>
            <li>
              <lable for="id"></lable>
              <input
                type="text"
                id="'id"
                placeholder="id 6글자이상"
                value={message} // e.target 이 벨류를 가르킨다
                onChange={onChangeMessage}
              />
            </li>
            <li>
              <lable for="fassword"></lable>
              <input
                type="password"
                id="fassword"
                placeholder="비밀번호입력 8글자이상"
                value={password}
                onChange={onChangePassWord}
              />
            </li>
          </ul>
          <button onClick={onClick}>로그인</button>
        </fieldset>
      </form>
      <button>회원가입</button>
      <button>아이디찾기</button>
    </div>
  );
};

export default Prac;

우선 useState 를 활용을해보았다 초깃값설정후 이벤트 헨드러를 사용해 input의 초깃값을 변경하고 그변경값을 벨로에 할당하였다.
그리고 로그인을 눌렀을시 간단한 유효성검사를 진행햇다 8글자이상이라는 조건을 제시한후 만족하지않을시 실패 만족하면 성공이라는 메세지가 뜨게 설정을 해보았다