• 숫자 카운트 올리기

import React, { useState } from "react";

function Counter() {
  const [count, setCount] = useState(10); // 초기값을 10으로 설정

  return (
    <div>
      <p>현재 숫자: {count}</p>
      <button onClick={() => setCount(count - 1)}>감소</button>
    </div>
  );
}

export default Counter;

• 체크박스 상태 표시

import React, { useState } from "react";

function Counter() {
  const [isChecked, setIsChecked] = useState(false); // 초기값을 false로 설정

  return (
    <div>
      <label>
        <input
          type="checkbox"
          checked={isChecked}
          onChange={() => setIsChecked(!isChecked)}
        />
        체크박스
      </label>
      <p>현재 상태: {isChecked ? "선택됨" : "선택 안 됨"}</p>
    </div>
  );
}

export default Counter;

• 입력 값 표시

import React, { useState } from "react";

function Counter() {
  const [text, setText] = useState(""); // 상태 변수를 빈 문자열로 초기화

  return (
    <div>
      <input
        type="text"
        value={text} // 입력 필드의 값과 상태를 연결
        onChange={(e) => setText(e.target.value)} // 입력 변경 시 상태 업데이트
        placeholder="텍스트를 입력하세요"
      />
      <p>입력한 내용: {text}</p> {/* 상태 값을 화면에 표시 */}
    </div>
  );
}

export default Counter;

• 할일 표시/제거

import React, { useState } from "react";

function Counter() {
  const [todos, setTodos] = useState([]); // 할 일 목록을 저장하는 상태 변수
  const [inputValue, setInputValue] = useState(""); // 입력 필드의 값을 저장하는 상태 변수

  const addTodo = () => {
    if (inputValue.trim() !== "") {
      setTodos([...todos, inputValue]); // 새로운 할 일을 목록에 추가
      setInputValue(""); // 입력 필드 초기화
    }
  };

  const removeTodo = (index) => {
    const newTodos = todos.filter((_, i) => i !== index); // 해당 인덱스의 아이템 제거
    setTodos(newTodos); // 상태 업데이트
  };

  return (
    <div>
      <input
        type="text"
        value={inputValue} // 입력 필드의 값과 상태를 연결
        onChange={(e) => setInputValue(e.target.value)} // 입력 변경 시 상태 업데이트
        placeholder="할 일을 입력하세요"
      />
      <button onClick={addTodo}>추가</button>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>
            {todo}
            <button onClick={() => removeTodo(index)}>삭제</button>{" "}
            {/* 아이템 삭제 기능 */}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default Counter;

• 다크/라이트 모드 전환

import React, { useState } from "react";

function Counter() {
  const [isDarkMode, setIsDarkMode] = useState(false); // 초기값을 false로 설정

  const toggleTheme = () => {
    setIsDarkMode(!isDarkMode); // 상태를 토글하여 모드 전환
  };

  const themeStyles = {
    backgroundColor: isDarkMode ? "#333" : "#FFF", // 다크 모드면 어두운 배경, 아니면 밝은 배경
    color: isDarkMode ? "#FFF" : "#000", // 다크 모드면 밝은 글자색, 아니면 어두운 글자색
    padding: "20px",
    textAlign: "center",
    height: "100vh",
  };

  return (
    <div style={themeStyles}>
      <h1>{isDarkMode ? "다크 모드" : "라이트 모드"}</h1>
      <button onClick={toggleTheme}>모드 전환</button>
    </div>
  );
}

export default Counter;

• 입력한 값에 원하는 값을 더하기

import React, { useState } from "react";

function CustomCounter() {
  const [count, setCount] = useState(0);
  const [increment, setIncrement] = useState(1);

  const handleIncrementChange = (e) => {
    setIncrement(Number(e.target.value));
  };

  const increaseCount = () => {
    setCount(count + increment);
  };

  return (
    <div>
      <h2>현재 카운트: {count}</h2>
      <input
        type="number"
        value={increment}
        onChange={handleIncrementChange}
        placeholder="증가할 값을 입력하세요"
      />
      <button onClick={increaseCount}>증가</button>
    </div>
  );
}

export default CustomCounter;

• 타이머