1주차 화요일

리액트를 배워야하는 이유

• npm trends에서 그래프로 봤을 때 react 사용자가 가장 많음
• react.js -> 웹
• react-native -> 앱 (크로스 플랫폼으로 안드로이드, ios 두 곳에 모두 배포 가능)
• react + electron -> pc앱
• 올인원으로 사용 가능

React 핵심

• component : UI 또는 기능을 부품화 해서 재사용 가능하게 하는 것
• component 만드는 2가지 방법
  1) 클래스형 -> function 대신 Class
  2) 함수형 -> function -> function 제외 const로 표시 후 return값 제외
  ※ 2가지의 컴포넌트를 알아야함

★ state -> 컴포넌트의 변수
state : 화면에 자동으로 변환되는 함수

클래스형 컴포넌트

export default function LetHello(){

  function zzz() {
    document.getElementById("qqq").innerText = "반갑습니다"
  }

  return (
    <div>
      <div id="qqq">안녕하세요</div>
      <button onClick={zzz}>Click</button>
    </div>
  )
}

Hooks 함수형 컴포넌트

import { useState } from "react"

export default function StateHello(){

  const [ qqq, setQqq ] = useState("안녕하세요");

  function zzz() {
    setQqq("반갑습니다")
  }

  return (
    <div>
      <div>{qqq}</div>
      <button onClick={zzz}>Click</button>
                    {/* ↑ {}는 변수 또는 함수 */}
    </div>
  )
}

// const [count,setCount] = useState();
// count는 state 변수 -> qqq
// setCount는 state를 바꿔주는 함수 -> setQqq
// useState(10) 는 초기값 -> "안녕하세요"

함수 컴포넌트 예시)
회원가입시 이메일과 비밀번호가 콘솔에 입력되게끔,
아이디의 형식과 비밀번호 형식에 맞게 작성하지 않을 경우 에러 메시지 표시

import { useState } from "react"

export default function StateSignup() {

  const [email, setEmail] = useState("")
  const [emailError,setEmailError] = useState("")
  const [password,setPassword] = useState("")
  const [passwordError,setPasswordError] = useState("")

  function aaa(event) {
    // event.target -> <input type="text" /> 태그 전체를 가져옴
    console.log(event.target.value) // -> 해당 태그의 값을 가져옴
    setEmail(event.target.value)
  }
  function bbb(event) {
    setPassword(event.target.value)
  }
  function ccc() {
    console.log('email: ' +  email)
    console.log('password: ' + password)

    if(email.includes("@") === false) {
      // alert("이메일에 @가 없습니다. 잘못된 이메일입니다.")
      setEmailError("잘못된 이메일입니다.")
    } else {
      // alert("회원가입을 축하합니다.")
      setPasswordError("잘못된 비밀번호입니다.")
    }
  }
  


  return (
    <div>
      이메일: <input type="text" onChange={aaa} /><br />
                                       {/* ↑ 이벤트 핸들러 함수(바뀌기 때문) */}
      <span>{emailError}</span><br /><br />
      비밀번호: <input type="password" onChange={bbb} /><br />
      <span>{passwordError}</span><br /><br />
      <button onClick={ccc}>회원가입</button>
    </div>
  )
}