상태 변수

일반 변수는 ui에 동기화 되지 않음

상태 변수는 동기화 된다 → reactive programming

화면에 동기화 시키고 싶은 변수는 상태변수를 사용하면 됨

import React, { useState } from "react";

// 클래스형 컴포넌트 => 함수형 => hooks 라이브러리 => 리덕스(Rx) => Mobx(Rx)

// 함수 바인딩 하기
// 일반 함수
// 화살표 함수 (람다)
// 함수 이름

function App() {
  const [num, setNum] = useState(1); // 상태변수

  let count = 1; // 일반 변수

  // 함수 생성 방법
  // 일반 함수
  function add() {
    count++;
    console.log(count);

    setNum(num + 1);
    console.log(num);
  }

  // 화살표 함수로 생성?????
  //const increase1 = function(){};
  const increase = () => {

	};

  return (
    <div>
      <h1>
        num : {num} count : {count}
      </h1>
			// 일반 함수
      <button onClick={function () {}}>+</button> <br />
			// 화살표 함수 (람다)
      <button onClick={() => {}}>+</button> <br />
      <button onClick={add}>+</button> <br /> 
      <button onClick={() => add()}>+</button> <br />
      <button onClick={increase}>+</button> <br />
    </div>
  );
}

export default App;

// 함수 이름

<button onClick={add}>+</button> <br />
// 위는 함수(주소)만 바인딩 add() 이렇게 쓰면 안됨
// add() -> 이건 바로 호출되는 것, 클릭이 일어났을 때 함수가 호출 되어야 하는거니까

// 매개변수를 받아야할 때 

 <button onClick={() => add(n)}>+</button> <br />

// 원형
() => {
	return add(n);
}

function App() {
  const [num, setNum] = useState(1); // 상태변수
	const [ 상태변수, 상태변수를 바꿀 수 있는 함수] = useState(변수 초기값);

  let count = 1; // 일반 변수

  // 함수 생성 방법
  // 일반 함수
  function add() {
    count++;
    console.log(count);

    setNum(num + 1);
    console.log(num);
  }

const [num, setNum] = useState(1);

1 이 num 에 들어감

이걸 바꿀 수 있는 애는 setNum 이라는 애 뿐 (const 니까)

그냥 바꾸면 경고 뜸