리액트 : useState 맛보기

import {useState} from 'react';
import {Page, LoginContainer, Title, Input, Waring, Button, Password} from '../../styles/LoginStyle.js'
function LoginPage(){

  const[email, setEmail] = useState();
  const[pw, setPw] = useState();
  
  const errorStyle = {
    border: '1px red'
  }
  
  function login(){
    if(!email.includes('@') || !email.includes('.'))
    {
     document.getElementById('waring').innerText = '이메일이 유효하지 않습니다';
     return;

    } else if(pw.length < 7) {
      alert('비밀번호가 유효하지 않습니다.');
      return;
    }
    console.log('Login');
    console.log(email);
    console.log(pw);
  }

  function emailChange(e){
    const temp = e.target.value;
    setEmail(temp);
  }
  function passwordChange(e){
    const temp = e.target.value;
    setPw(temp);
  }
  return(
    <>
    <Page>
    <LoginContainer>
    <Title>로그인</Title>
    <div>Email : <Input name= "email" type="text" onChange={emailChange}/></div>
    <div>Password : <Password name="password" type="password" onChange={passwordChange}/></div>
    <Waring id="waring"></Waring>
    <Button onClick={login}>login</Button>
    </LoginContainer>
    </Page>
    </>
  )
}
export default LoginPage;

useState

매우매우 간단하게 이메일 검증과 비밀번호의 길이로 validation을 하는 간단한 코드이다.
중요한건 Hooks기능이 도입되어 함수형 컴포넌트에서도 상태를 관리할수 있어져서, useState()함수 사용시 상태를 관리 할 수 있다.

또한 리액트에서 객체를 수정할때는 input aaa = value 처럼 직접 수정한다면 객체의 불변성을 보장할 수 없기 때문에
기존 객체를 복사하여 새로운 객체에 업데이트 작업을 해야 필요한 부분만이 리랜더링 된다.

로그인 화면만들기

• Emotion으로 css
• div로 잘 나눳는지
• 버튼 스타일

• 문제점
  • div로 나눠진것들에 대한 width 와 height가 아직 명확하지않음
  • 버튼에 대한 스타일을 정확히 하지못함
  • figma와 재플린
  • 정규식 표현에 대한 공부 필요