Step 3: useState 기본

<!-- HTML -->
<div id="message">안녕하세요</div>
<button id="button">변경</button>

<!-- JavaScript -->
<script>
  const message = document.querySelector("#message");
  const button = document.querySelector("#button");
  
  button.addEventListener("click", () => {
    message.textContent = "변경됨!";
  });
</script>

"use client";
import { useState } from "react";

export default function TextChange() {
  const [message, setMessage] = useState("안녕하세요");

  return (
    <div>
      <div>{message}</div>
      <button onClick={() => setMessage("변경됨!")}>변경</button>
    </div>
  );
}

<!-- HTML -->
<div id="box">숨길 수 있는 박스</div>
<button id="button">토글</button>

<!-- JavaScript -->
<script>
  const box = document.querySelector("#box");
  const button = document.querySelector("#button");
  
  button.addEventListener("click", () => {
    const isHidden = box.hasAttribute("hidden");
    if (isHidden) {
      box.removeAttribute("hidden");
    } else {
      box.setAttribute("hidden", "");
    }
  });
</script>

"use client";
import { useState } from "react";

export default function Toggle() {
  const [isHidden, setIsHidden] = 
    useState(false);

  return (
    <div>
      <div hidden={isHidden}>숨길 수 있는 박스</div>
      <button onClick={() => setIsHidden(!isHidden)}>
        토글
      </button>
    </div>
  );
}

<!-- HTML -->
<div id="display">0</div>
<button id="decrease">-</button>
<button id="reset">0</button>
<button id="increase">+</button>

<!-- JavaScript -->
<script>
  let count = 0;
  const display = document.querySelector("#display");

  document.querySelector("#increase").addEventListener("click", () => {
    count++;
    display.textContent = count;
  });

  document.querySelector("#decrease").addEventListener("click", () => {
    count--;
    display.textContent = count;
  });

  document.querySelector("#reset").addEventListener("click", () => {
    count = 0;
    display.textContent = count;
  });
</script>

"use client";
import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <div>{count}</div>
      <button onClick={() => setCount(count - 1)}>-</button>
      <button onClick={() => setCount(0)}>0</button>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
}