📁 Counter.js

import React, { useState } from "react";

const Counter = () => {
  // 0에서 출발 = useState(0)
  // 1씩 증가
  // 1씩 감소
  // count 상태

  console.log("count 호출");

  const [count, setCount] = useState(0);

  const onIncrease = () => {
    setCount(count + 1);
  };

  const onDecrease = () => {
    setCount(count - 1);
  };

  const [count2, setCount2] = useState(0);

  const onIncrease2 = () => {
    setCount2(count2 + 3);
  };
  const onDecrease2 = () => {
    setCount2(count - 3);
  };

  return (
    <div>
      <h2>{count}</h2>
      <button onClick={onIncrease}>+</button>
      <button onClick={onDecrease}>-</button>

      <h2>{count2}</h2>
      <button onClick={onIncrease2}>+</button>
      <button onClick={onDecrease2}>-</button>
    </div>
  );
};

export default Counter;

📁 App.js

import React from "react";
import Counter from "./Counter";
// import "./App.css";

import MyHeader from "./MyHeader";

function App() {
  const number = 6;

  return (
    <div>
      <MyHeader />
      <Counter />
    </div>
  );
}

export default App;

❗ useState로 상태를 만들면 count 이름으로 그 상태의 값을 불러올수 있고, setCount라는 상태로 이 상태를 업데이트 시킬 수 있다 초기값은useState() 괄호 안에 넣어준다

❗ App 컴포넌트가 Counter 컴포넌트를 호출하고 반환받은 html을 화면에 표시하는거기 때문에 Counter 컴포넌트가 return을 다시 하는것
= 화면을 새로 그리는것
= rerender

👉 컴포넌트는 자신이 가진 state가 변화하면 화면을 다시 그려 rerender을 한다
= 함수가 다시 호출된다

👍 state는 짧은 코드와 유연한 문법으로 화면에 나타나는 데이터를 쉽게 교체하고 업데이트할 수 있도록 도와준다
= 사용자의 버튼클릭과 같은 이벤트 동적으로 바뀌는 웹사이트를 만들 수 있다