리액트를 배워야하는 이유
React 핵심
★ 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>
)
}