리엑트의 가장 큰 장점: jsx문법 사용으로 데이터 바인딩이 매우 쉽다.
데이터 바인딩이란?
document.getElementById().innerHTML = ""? //전통적인 JS데이터 바인딩 <h1> {변수or 함수()} </h4> // 모든 DOM요소에 간편히 접근 및 수정할 수 있음 / 직관적이기도 함 <img src={logo} /> //이미지, url등의 속성에도 변수 함수 사용 가능 <div style={ { color : 'blue'}, { font-size : 23px}} // 객체 형태로 DOM 요소에 style 속성 적용 가능
리엑트에서 데이터를 보관하는 장소는 크게 2개로 나눌 수 있다.
state란?
변수 대신에 사용할 수 있는 데이터 저장 공간
let movie = "Avengers"
// 변수 만드는법
import React, { useState } from 'react';
// state 만드는 법 -> React 내장 함수인 useState를 import
useState('맛있는 라멘'); // [a,b] data가 2개인 배열이 생성됨
// a : 우리가 선언한 data
// b : data를 수정하기위한 function을 생성
let [a,b] = [10,100] //a와b에 각각 10과 100 담기를 요청하는 행위
// ex)
let [라면 종류, 라면 변경] = useState(['소유라멘', '미소라멘', '돈코츠 라멘'])
<p> { 라면 종류[0] } </p> // '소유라멘'
<p> { 라면 종류[1] } </p> // '미소라멘'
<p> { 라면 종류[2] } </p> // '돈코츠라멘'
// 문자 숫자 배열 객체 등 모든 데이터 타입 저장 가능
Web Site를 Web App처럼 사용할 수 있음
State가 변경되면 HTML이 자동으로 재렌더링됨
ex) 실시간 댓글이라던가 채팅, 좋아요 수와 같이 잦은 변경이 요구되는 데이터들이 변경 시 알아서 자동으로 랜더링됨 -> 자연스러운 사이트 구현 가능
자주 변경되는 Data들은 State에 저장해주자
React에서는 정말 간편하게 이벤트리스너를 만들 수 있음
import React, { useState } from 'react';
import './App.css';
function App() {
let [like, like변경] = useState(0);
let [라멘 종류, 라멘 변경] = useState(['소유라멘', '미소라멘', '돈코츠 라멘'])
function 라멘변경하기(){
라멘변경[0] = '탄탄면' // 이렇게 state의 데이터를 바로 변경시키면 안됨 -> 값 공유가 일어남 (참조타입데이터)
let newArray = [...라멘 종류]; // state의 복사본을 만들어서 변경해야함
newArray[0] = '탄탄면';
라멘변경(newArray); // 복사본을
}
return (
<h3><button onClick={ () =>{ like변경('like + 1') }}>💜</button> { like } </h3>
<h3><button onClick={ 라면 변경}}>💜</button> { like } </h3>
)
}
//state 변경이 일어나야 reRandering이 일어난다.
//state 변경은 state변경함수로 변경해야한다.
//JS 내에서 함수 선언과 사용 모두 다 할 수 있음