1. 실무에서 React를 쓰는 이유
리액트와 컴포넌트
컴포넌트는 부품을 의미하고 리액트의 핵심이다.
말 그대로 ui 또는 기능을 부품화해서 재사용 가능할 수 있게 하고
인풋이나 버튼을 미리 만들어 필요할 때마다 가져와서 쓸 수 있다!
📌 기존에는 페이지를 각각 만들었다면 리액트에서는 부품을 먼저 만들고 이를 가져와 조립하는 방식이기에 큰 서비스를 만들 때 유용함
리액트 외에도 vue와 Angular 등이 있음!
2. React를 배워야 하는 이유
리액트 사용자 수가 많음
국내에는 뷰도 많이 사용하지만 전세계적으로 리액트를 사용
1) 자료가 많고
2) 질문과 검색이 쉬우며
3) 취업 및 이직에 유리!
이 외에도 사용자가 많아진 이유는 리액트만 사용해도 앱, 웹, pc앱을 다 만들 수 있음
그러다보니 현재 뷰도 많이 발전했지만 이미 리액트가 전반적인 시장을 장악하고 있는 상태
(ex 페이스북, 인스타그램, 우버 등등.. )
❗️❗️ 크로스 플랫폼
앱을 만드려면 안드로이드 버전, ios버전 따로 만들어야하는데 react-native를 사용하면 하나의 버전을 통해 플레이스토어, 앱스토어 모두 배포 가능
가장 인기 있는 컴포넌트 기반 개발 도구로 자리 잡음
3. 컴포넌트와 복사 & 붙여넣기의 차이
예를 들어 복사 & 붙여넣기를 통하여 배경색을 바꿔야한다면 각각의 div에 접근해야한다.
하지만 컴포넌트를 사용하면 하나의 컴포넌트의 배경 속성에만 접근하면 한 번에 수정이 용이하다.
개발자에 따라 컴포넌트는 다양해질 수 있고 페이지도 하나의 큰 컴포넌트가 될 수 있다.이를 페이지 컴포넌트(=함수형 컴포넌트)라고 한다.
4. 컴포넌트 만드는 방법
1) class형 컴포넌트
- 좀 복잡함.. 나중에 더 알아볼 예정
- 함수형이 나오기 전에 거의 3년 전(2023기준)에 주로 사용
- 함수형이 나오면서부터 사용을 잘 안함
export default function CounterLetDocumentPage() {
function onClickCountUp() {
const count = Number(document.getElementById("qqq").innerText) + 1
document.getElementById("qqq").innerText = count
}
function onClickCountDown() {
const count = Number(document.getElementById("qqq").innerText) - 1
document.getElementById("qqq").innerText = count
}
return (
<div>
<div id="qqq">0</div>
<button onClick={onClickCountUp}>카운트 올리기</button>
<button onClick={onClickCountDown}>카운트 내리기</button>
</div>
)
}2) 함수형 컴포넌트
- 클래스형보다 간단하고 보기 편함
- 현재 클래스형에서 함수형으로 넘어오고 있는 추세
- 화살표형으로도 변경 가능
- 최근 프로젝트는 대부분 함수형으로 사용
import { useState } from 'react'
export default function CounterState() {
const [count, setCount] = useState(0)
// let count = 0 let은 리액트 전용 html에서 변경을 감지하지 못 함 따라서 state를 써야함 //
function onClickCountUp() {
setCount(count + 1)
}
function onClickCountDown() {
setCount(count - 1)
}
return (
<div>
<div>{count}</div>
<button onClick={onClickCountUp}>카운트 올리기</button>
<button onClick={onClickCountDown}>카운트 내리기</button>
</div>
)
}📌📌 그러나 함수형뿐만 아니라 클래스형을 반드시 알아야하는 이유`
이전에 사용하던 클래스형이 아직 많이 남아 있다!!!
1) 클래스형을 만들어 놓고 그대로 유지하는 경우
2) 클래스형으로 만들었지만, 부분적으로 함수형으로 변경하는 경우(대부분의 회사에 클래스형이 있는 경우)
3) 검색한 코드가 클래스형인 경우
5. 함수형 컴포넌트 탄생 계기
기존의 클래스형은 길이가 너무 길고 복잡하기에 리액트에서 Hooks을 만들어 배포
클래스에서 사용하던 기능을 모두 사용 가능하여 간편하게 코드 작성이 가능
1) React에서 사용하는 변수
Hooks란?
use로 시작하는 애들
ex) useState, useEffect 등등..
기존에는 let, const 사용하여 변수 만들었으나 컴포넌트에서는 다르다
useState를 통해 리액트에서 변수 만들 수 있고, state는 컴포넌트 전용 변수이다.
2) 기존 방식과의 차이점
(1) 변수 만드는 방법 비교
// 기존 방식
let count = 0
const count = 0 // useState 사용하는 방식
const[count, setCount] = useState(0)
//변수명 count
// 변수를 바꿔주는 함수 setCount
// hooks 기능 useState
// 초기값 0(2) 변수 바꾸는 방법 비교
기존 방식
export default function CounterLetDocumentPage() {
function onClickCountUp() {
const count = Number(document.getElementById("qqq").innerText) + 1
document.getElementById("qqq").innerText = count
}
function onClickCountDown() {
const count = Number(document.getElementById("qqq").innerText) - 1
document.getElementById("qqq").innerText = count
}
return (
<div>
<div id="qqq">0</div>
<button onClick={onClickCountUp}>카운트 올리기</button>
<button onClick={onClickCountDown}>카운트 내리기</button>
</div>
)
}↑↑↑↑ 위와 같은 기존의 방식 익숙하지만 그럼에도 불구하고 state를 사용하는 이유는
State만 이해하면 document,getElementByid() 이딴거 사용 안해도 된다!!!!!
리액트 방식
import { useState } from 'react'
export default function CounterState() {
const [count, setCount] = useState(0)
// let count = 0 let은 리액트 전용 html에서 변경을 감지하지 못 함 따라서 state를 써야함 //
function onClickCountUp() {
setCount(count + 1)
}
function onClickCountDown() {
setCount(count - 1)
}
return (
<div>
<div>{count}</div>
<button onClick={onClickCountUp}>카운트 올리기</button>
<button onClick={onClickCountDown}>카운트 내리기</button>
</div>
)
}⭐️결과적으로는 불필요한 코드가 빠지기 때문에 조금 복잡하지만 코드가 간결해짐!!⭐️
오늘의 꿀팁🍯
- 맥에서 커맨드 / 우분투 컨트롤을 누른 상태에서 변수를 클릭하면 그 변수의 위치와 속성이 나옴
- 수정도 가능하며 저장할 땐 마우스 커서를 그 창에 올린 채로 저장
- 제목을 클릭하면 파일에도 접근 가능
- 파일 접근 후 이전 파일로 돌아갈 땐
맥 컨트롤 누르고 - / 우분투 컨트롤 알트 -- 다시 돌아가면 맥 & 우분투 컨트롤 쉬프트 -
<실습> 에러 메세지 표시
import { useState } from "react"
export default function SignupStatePage() {
const [email, setEmail] = useState("")
const [password, setPassword] = useState("")
// const [emailerror, setEmailerror] = useState('현재는 에러가 없는 상태입니다.') -> 초기값 있을 때
const [emailerror, setEmailerror] = useState('') // -> 초기값 없을 때
// event handler 함수
function onChangeEmail(event) {
// console.log(event) 나의 행동
// console.log(event.target) 작동된 태그
// console.log(event.target.value) 작동된 태그에 입력된 값
setEmail(event.target.value)
}
// event handler 함수
function onChangePassword(event) {
setPassword(event.target.value)
}
function onClickSignup() {
// 진짜 포장이 잘 되어 있는지 확인
console.log(email)
console.log(password)
// 1. 검증
if (email.includes("@") === false) {
// alert("이메일이 올바르지 않습니다.")
// document.getElementById("myerror").innerText = "이메일이 올바르지 않습니다."
setEmailerror("이메일이 올바르지 않습니다.")
} else {
// 2. 검증이 되면 백엔드 컴퓨터에 보내주기(백엔드 개발자가 만든 함수. 즉, API) -> 나중에 할 것
// 3. 성공 알람 보여주기
alert("회원가입을 축하합니다!!")
}
}
return (
<div>
이메일 : <input type="text" onChange={onChangeEmail}></input>
{/*<div id="myerror"></div>*/}
<div>{emailerror}</div>
비밀번호 : <input type="password" onChange={onChangePassword}></input>
<button onClick={onClickSignup}>회원가입</button>
</div>
)
}이전에 프리캠프에서 js를 할 때는 너무 복잡하고 눈에 들어오지 않아 하기 싫었는데 그래도 state의 방식을 사용하다보니까 좀 더 편한 느낌이다!!! 뭔가 제대로 공부를 안하고 state를 공부했기 때문에 머릿속에 잘 들어 온건가 싶은 느낌🤣🤣🤣
오프라인 수업 들어오기 전에 js가 발목을 잡을까 많이 걱정했는데 그래도 뭔가 걱정을 조금 덜은 느낌이다 :)
앞으로도 아자아자 화이팅!!
중꺾마중꺾마👏👏
