React를 사용하면 여러 페이지들을 부품(Component)단위로 만들어 조립할 수 있다.
UI 또는 기능을 부품화해서 import시 재사용 가능하게 하는 것이다.
변경이 필요할때 원본 컴포넌트만 수정하면 되고, 데이터는 각 컴포넌트에 맞게 변경해주면 되기 때문에 관리하기가 편리하다.
페이지도 하나의 큰 컴포넌트 이다.
컴포넌트에는 클래스형 컴포넌트와 함수형 컴포넌트가 있다.
클래스형 컴포넌트보다 함수형이 더 간단하고 편리해서 대부분 함수형 컴포넌트를 사용한다.
기존방식으로 최근에는 잘 사용하지 않는다.
그렇지만 클래스형 컴포넌트 사용 방법도 알아야 한다.
클래스형을 반드시 알아야 하는 이유
최근방식
화살표 함수로 표현 가능하다.
const New = () => <div>내용</div>
export default New
import { useState, useEffect } from "react"
React 전용 변수, 도구를 함수 안에서 사용할 수 있도록 도와준다.
use로 시작하는 변수들은 react 전용변수 hook이다.
(useState, useEffect 등)
State는 컴포넌트에서 사용하는 변수이다.
📌 실무에서 { state, setState, useState }는 언제 사용할까?
1) 회원가입, 게시물작성 내용 등을 서버컴퓨터에 전송하기위해 변수에 담아둘 때 사용
2) 작성한 내용을 검증하고 잘못된 부분을 빨간색으로 표기할 때 사용
const [변수명] = 변수만드는기능(담을내용)
const [count] = useState(0)
const [writer] = useState("")
const [변수명, 변수바꾸는기능] = 변수만드는기능(담을내용)
const [count, setCount] = useState(0)
setCount(5) // count가 0에서 5로 바뀐다.
const [writer, setWriter] = useState("")
setWriter("작성자") // writer가 빈 문자열에서 "작성자"로 바뀐다.
State를 이용하면 document.getElementById() 등을 사용하지 않아도 돼서 편리하다.
import { useState } from "react"
export default function Login () {
const [id, setId] = useState('')
const [pw, setPw] = useState('')
const [errorId, setErrorId] = useState('')
const [errorPw, setErrorPw] = useState('')
function handleChangeId(event) {
const value = event.target.value
setId(value)
}
function handleChangePw(event) {
const value = event.target.value
setPw(value)
}
function handleClickLogin() {
if(id === "") {
setErrorId('! 아이디를 정확히 입력해 주세요.')
}
if(pw === "") {
setErrorPw('! 비밀번호를 정확히 입력해 주세요.')
}
if(id !== "" && pw !== ""){
alert('아이디와 비밀번호가 모두 입력되었습니다. 로그인을 시작합니다.')
}
}
return (
<div>
<h1>로그인</h1>
<div>아이디 {id}</div>
<input type="text" onChange={handleChangeId}/>
<div style={{color: 'red'}}>{errorId}</div>
<div>비밀번호 {pw}</div>
<input type="text" onChange={handleChangePw}/>
<div style={{color: 'red'}}>{errorPw}</div>
<div>
<button onClick={handleClickLogin}>로그인</button>
</div>
</div>
)
}
📌 자바스크립트의 event
자바스크립트에서의 event 는 사용자가 어떤 행위를 했는가를 알려준다.
evevt.target 은 행위가 적용된 대상 즉, 태그를 의미한다.
그리고 event.target.value 는 작동된 태그에 입력된 값을 의미한다.
최초 접속 페이지를 보여주며, 모든 페이지의 설정파일을 담당한다.
MyApp 함수 return 윗부분에는 모든 페이지에 공통적용 되는 설정을 입력할 수 있다.
return부분에 Componet로 모든 페이지들을 가져올 수 있다.