React, useState, Counter.js

Counter.js

import React, { useState } from "react";

const Counter = () => {
    const [number, setNumber] = useState(0);
    const [fixedNumber] = useState(0); // This value remains fixed.

    const handleClick = () => {
        setNumber((prevNumber) => {
            const updatedNumber = prevNumber + 1;
            console.log("방금 setNumber가 호출되었습니다.");
            console.log({ number: updatedNumber });
            return updatedNumber;
        });
    };

    return (
        <div>
            <h1>{number}</h1>
            <h2>바뀌지 않는 값: {fixedNumber}</h2>
            <button onClick={handleClick}>+1</button>
        </div>
    );
};

export default Counter;

 

https://stackblitz.com/edit/react-basecamp-qdkdcwk3?embed=1&file=src%2FCounter.jsx