[2일차] React의 useState 사용/잇츠로드 로그인 화면 구현

1. State -> 리액트 컴포넌트에서 데이터를 담기 위한 상자.
   기존 document.getelementbyid.innertext 를 통해 화면에 나오게 했던 기능을 React 의 state를 통해 쉽게 구현할 수 있는 것 같다.

const [state, setState] = useState("")
useState는 const [state, setState] 대괄호의 형태를 만들기 위한 것.
[] 안의 setState가 화면에 직접 나오게 하는 기능.
useState('000000') -> 괄호 안 내용이 [state]의 기본 값이 됨.

State는 서버에 데이터를 전송할 때에도 사용.

사용법
import {useState} from 'react'

const [email, setEmail] = useState("")
const [errorId, seterrorId] = useState("")

->state 선언. 메일주소에 @가 들어갔는지 확인. 그렇지 않을 경우 경고 메세지를 화면에 띄울 예정.

    function LoginPage(){
    function emailChange(event){
    const temp = event.target.value
    setEmail(temp)
    console.log(email)
}

-> 함수 선언. 메일 text안에 값이 들어갈 경우 그 값을 읽어내는 기능? 감지 기능. event.target.value 기억하자.

<InputId type = "text" onChange={emailChange}></InputId>

-> emotion사용. onChange를 통해 내용 변경을 감지. onChange 대소문자에 주의하자. onchange={} 괄호 안에 위에 선언헌 적용될 함수를 넣음.

 function ErrorMessage(){
    if(email.indexOf("@") === -1){
        seterrorId("이메일 주소를 다시 확인해주세요.")
    } 
 }

-> setState() 사용. ()안에 들어갈 메세지 입력.

    <ErrorIdMessage>{errorId}</ErrorIdMessage>     

->emotion 안에 위에 선언한 {state} 변수인 {errorId}를 할당.

정리하면

1. useState를 사용하여 setState, state 선언.
2. 텍스트 안에 변화 감지할 수 있는 함수 선언.
3. emotion 안에 onChange를 넣어 텍스트 변화 감지 함수 적용.
4. 에러 메세지 함수 적용. @가 없을 시 setState() 적용.
5. emotion 안에 위에 선언한 {state} 변수인 {errorId}를 할당.

---

2. 잇츠로드 로그인 페이지

   

   전날 만든거에 비하면 모양새가 나름 있어 다행이다. State기능이 완전치 않아 좀 더 연습해야겠다.

---

3. 기타 몰랐던 것

• emotion으로 라디오 버튼 만들기.
  

• React에서의 이미지 위치는 public폴더가 디폴트로 되어있음.