useState

index.js

import React from "react";
import ReactDOM from "react-dom/client";
import AppCounter from "./AppCounter";
import "./index.css";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <AppCounter />
  </React.StrictMode>
);

AppCounter.jsx

import { useState } from "react";
import Counter from "./components/Counter";

export default function AppCounter() {
  const [count, setCount] = useState(0);
  
  const addTotalCount = () => {
    setCount((prev) => {
      return prev + 1;
    });
  };
  
  return (
    <div>
      <div className="container">
        <div className="banner">
          Total Count: {count} {count > 10 ? "good" : "bad"}
        </div>
      </div>
      <Counter addTotalCount={addTotalCount} />
      <Counter addTotalCount={addTotalCount} />
    </div>
  );
}

Counter.jsx

import { useState } from "react";

export default function Counter({ addTotalCount }) {
  const [num, setNum] = useState(0);

  return (
    <div className="container">
      <div className="counter">
        <span className="number">{num}</span>
        <button
          className="button"
          onClick={() => {
            // setNum이 실행될때마다(내부 상태가 변경될 때마다) React에서 이 Counter 함수 자체를 다시 실행시켜줌
            // Props가 변경되어도 마찬가지임
            // 그럼 그때마다 Counter에서 리턴되는 요소가 다 바뀌는건 아님
            // VirtualDOM에서 리렌더링하고 바뀐 부분(span의 num)만 실제 DOM에서 바뀌기 때문
            // setNum(num + 1);

            // setNum(num + 1);
            // setNum(num + 1);
            // setNum은 여러번 호출해봤자 외부에서 받는 num은 항상 0이므로 1밖에 늘어지 않음
            // setNum에 콜백함수로 이전 상태값을 받아서 리턴해주는 로직을 작성해주면 됨
            // 이 방식이 위 방식보다 안전함
            setNum((prev) => {
              return prev + 1;
            });

            addTotalCount();
          }}
        >
          Add +
        </button>
      </div>
    </div>
  );
}

View