3월15일 2days

지하철을 반대로 타는바람에 사당에서 다시 되돌아 가는 지하철을 타고 오는바람에 9시 정각에 도착했다. 시간에 딱 맞춰서 도착 하다보니 노트북 셋팅이며 화면 연결까지 시간이 너무 빠듯했다.

오전 수업에 React 컴포넌트에 대한 설명을 듣고서 세상이 발전한 만큼 컴퓨터 세상에서도 참 편리하고 쉽게 코드를 입력할수 있게 된 세상이 되었다.

React-Hooks에는 다양한 기능들이 있는데 오늘은 useState에 대해서 배웠다. state는 데이터를 담는 상자, useSate는 그 상자를 만드는 기능, setState는 상자에 담긴 데이터를 바꿔주는 기능이였습니다. 기존에 let으로 사용했던 방식은 매번 자바스크립트를 사용해서 화면에 다시 그려줘야하는 번거로움이 있었습니다. 하지만 state를 사용하면 데이터가 변하면 자동으로 화면을 다시 그려주기 때문에 코드도 짧아지고 편리했습니다.

오늘 배웠지만 아직 머릿속에선 정리가 안된 부분이 많다 .

복습을 해서 내것으로 만들어야겠단 생각뿐이다

수업중 디스코드로 올려준 코드

import { useState } from 'react'

export default function CounterStatePage(){
let count = 0

function counter(){
    count = count + 1
    console.log(count)
}

return (
    <div>
        <div>{count}</div>
        <button onClick={counter}>카운트 올리기!!!</button>
    </div>
)

}
//let 이 화면에 반영이 안되는 사례

import { useState } from 'react'

export default function CounterStatePage(){
let count = 0
const apple = 3

function counter(){

    console.log(apple)

    count = count + 1
    console.log(count)
}

return (
    <div>
        <div>{count}</div>
        <button onClick={counter}>카운트 올리기!!!</button>
    </div>
)

}

//스코프체인 사례

import { useState } from 'react'

export default function SignupStatePage(){
const [email, setEmail] = useState("")
const [emailError, setEmailError] = useState("")

const [password, setPassword] = useState("")

function onChangeEmail(event){
    console.log(event.target.value)
    // event.target       => 태그전체 <input type="text" ...
    // event.target.value => 우리가 입력한 값 a@a.com
    setEmail(event.target.value)
}

function onChangePassword(event){
    setPassword(event.target.value)
}

function onClickSignup(){
    // 진짜 포장이 잘 됐는지 확인해보기
    console.log(email)
    console.log(password)

    if(email.includes("@") === false){
        // alert("이메일이 올바르지 않습니다!! @가 없음!!")
        setEmailError("이메일이 올바르지 않습니다!! @가 없음!!")
    } else {
        alert("회원가입을 축하합니다!!!")
    }
}

return (
    <div>
        이메일: <input type="text" onChange={onChangeEmail} /><br />
        <div>{emailError}</div>
        비밀번호: <input type="password" onChange={onChangePassword} /><br />
        <button onClick={onClickSignup}>회원가입</button>
    </div>
)

}

//에러처리