리액트 기본

• 리액트는 기본적으로 Javascript 사용
• 업데이트 된 사항?
  1. 자동으로 UI 업데이트
  2. 코드 재활용을 많이 함 (JSX 문법: html +Javascript)

---

• repl.it.com ⇒ 온라인 코딩툴
• 폴더 구조: src 폴더 내
  • App.jsx: 웹사이트에 보일 내용
  • main.jsx: index.html 파일과 App.jsx를 연결해줌
• 기존 html 과 차이? → div 태그 안에 class 대신 className 으로 사용!

---

state

① state 가 바뀌면 UI가 자동으로 업데이트 됨

import React**,{useState}** from 'react';
import './App.css';

function App() {
  let count = 0
  **const [count2, setCount2] = useState(0)**
		// count2: 초기값을 담고 있는 state 변수
		// setCount2: state 의 값을 업데이트 해주는 함수
  const increase = () => {
    count = count + 1
    // count2 = count2 + 1 //안됨!
    **setCount2(count2 + 1)**
    console.log("count work?", count)
  }
  return (
    <main>
      <div>{count}</div>
      <div>state:{count2}</div>
      <button onClick={increase}>증가</button>
    </main>
  )
}

export default App;

② state 는 비동기적이다! (함수 끝날때까지 기다림)

③ state 값이 업데이트가 되면 변수의 값은 다시 초기화 됨