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>
)
}
Author And Source
이 문제에 관하여(1주차 화요일), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@kkangda712/1주차-화요일저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)