React Component 및 State
React를 배워야 하는 이유
1. 가장 많은 사용자 수.
2. 하나를 배우면 웹, 안드로이드 ,IOS, 데스크톱을 동시에 만들 수 있다.
React 컴포넌트
- UI 또는 기능을 부품화 해서 재사용 가능 하게 하는 것.
- 동일한 UI를 재활용하고, 안에 데이터와 이미지만 바꿔준다.
- 컴포넌트는 복사/붙여넣기와 다르다원본 하나를 만들어서 뿌려주는 개념).
- 데이터는 각 컴포넌트에 맞게 변경하여 사용 가능하다.
클래스형 컴포넌트 vs 함수형 컴포넌트
클래스형
import {Component} from "react";
class New extends Component {
render(){
return <div>클래스형 컴포넌트.</div>
}
}
export default New함수형
funcrion New() {
return <div>함수형 컴포넌트</div>
}
export default New화살표 함수형
const New = () => <div> 함수형 컴포넌트 </div>
export default New함수형이 훨씬 더 간단해 보인다.
React는 처음에 클래스형 방법만 존재하였다.
클래스형이 어렵고, 복잡하여 이후에 함수형 컴포넌트 방법이 추가되었다.
최근에는 많은 기업이 함수형 컴포넌트를 주로 사용한다. 하지만, 기존에 이미 만들어진 서비스들은 클래스형으로
되어있는 경우도 많으므로, 클래스형도 알아둬야 할 필요가 있다.
State
- state란 리액트 컴포넌트에서 데이터를 담기 위한 상자.
1. useState로 State변수 만들고, 바꾸기
// 자바스크립트에서 변수 만들기
변수만드는기능 변수명 = 담을내용 ==> let classmate = "철수"
// 리액트 컴포넌트에서 변수 만들기
const [변수명] = 변수만드는기능(담을내용) ==> const [classmate] = useState("철수"// 자바스크립트에서 변수 바꾸기
let classmate = "철수"
classmate = "영희" // classmate 가 영희로 바뀝니다.
// 리액트 컴포넌트에서 변수 바꾸기
const [변수명, 변수바꾸는기능] = 변수만드는기능(담을내용)
const [classmate, setClassmate] = useState("철수")
setClassmate("영희") // classmate 가 영희로 바뀝니다.2. React에서 let을 안쓰고 state를 변수로 사용하는 이유
리액트 컴포넌트는 앞쪽에 화면에 보여지는 부분과 뒷쪽에 데이터를 관리하는 부분으로 나눌 수 있다.
만약, 단순히 자바스크립트 변수 let를 사용해서 좋아요를 화면에 그렸다면, 좋아요가 증가해서 17로 변경 되었을 때,
뒷쪽의 데이터 부분만 변경되고, 앞쪽 화면에는 반영이 되지 않는다.
화면에 반영 되길 원한다면,document.getElementById("count")innerText를 이용해서 화면에 반영 해야 한다.
하지만, 컴포넌트 변수 state를 사용해서 화면에 그리고, setState()를 사용해서 좋아요를 변경하면, setState() 안에서
화면을 개롭게 그리라는 명령이 실행되어 변경된 데이터가 화면에 새로 그려진다.
// let으로 count 예제 실험해보기(기존 방식)
function New() {
let count = 0 // let으로 자바스크립트 변수 만들기
function 팀() {
count = count + 1 // 갯수는 증가했지만, 화면에는 반영이 안됨
}
return (
<div>
<h1>{count}</h1>
<button onClick={handleClick}>let을 사용하여 count 증가</button>
</div>
)
}
export default New
// state로 count 예제 실험해보기
import { useState } from 'react'
function New() {
const [count, setCount] = useState(0) // state로 컴포넌트 변수 만들기
function handleClick() {
setCount(count + 1) // 갯수가 증가하면서, 화면에 정상적으로 반영됨
}
return (
<div>
<h1>{count}</h1>