리엑트의 가장 큰 장점: jsx문법 사용으로 데이터 바인딩이 매우 쉽다.

데이터 바인딩이란?

document.getElementById().innerHTML = ""?
  //전통적인 JS데이터 바인딩
 
  <h1> {변수or 함수()} </h4>
// 모든 DOM요소에 간편히 접근 및 수정할 수 있음 / 직관적이기도 함

  <img src={logo} />
 //이미지, url등의 속성에도 변수 함수 사용 가능
   
  <div style={ { color : 'blue'}, { font-size : 23px}}
 // 객체 형태로 DOM 요소에 style 속성 적용 가능

리엑트에서 데이터를 보관하는 장소는 크게 2개로 나눌 수 있다.

1. 변수
2. state

state란?
변수 대신에 사용할 수 있는 데이터 저장 공간

state

let movie = "Avengers"
// 변수 만드는법 

import React, { useState } from 'react';
// state 만드는 법 -> React 내장 함수인 useState를 import

useState('맛있는 라멘'); // [a,b] data가 2개인 배열이 생성됨 
// a : 우리가 선언한 data
// b : data를 수정하기위한 function을 생성

Destructuring

let [a,b] = [10,100] //a와b에 각각 10과 100 담기를 요청하는 행위
// ex) 

응용

let [라면 종류, 라면 변경] = useState(['소유라멘', '미소라멘', '돈코츠 라멘'])

<p> { 라면 종류[0] } </p> // '소유라멘'
<p> { 라면 종류[1] } </p> // '미소라멘'
<p> { 라면 종류[2] } </p> // '돈코츠라멘'

// 문자 숫자 배열 객체 등 모든 데이터 타입 저장 가능 

State 장점

Web Site를 Web App처럼 사용할 수 있음

State가 변경되면 HTML이 자동으로 재렌더링됨

ex) 실시간 댓글이라던가 채팅, 좋아요 수와 같이 잦은 변경이 요구되는 데이터들이 변경 시 알아서 자동으로 랜더링됨 -> 자연스러운 사이트 구현 가능
자주 변경되는 Data들은 State에 저장해주자

EventListener

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 내에서 함수 선언과 사용 모두 다 할 수 있음