memo) React

땅니·2023년 4월 8일
<!DOCTYPE html>
<html lang="en">
<body>
    <div id="root"></div>
</body>
    <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/babel">

        function App() {
            const [minutes, setMinutes] = React.useState(0); // default 값: 0 
            const onChange = (event) => {
                setMinutes(event.target.value);
            };
            const reset = () => setMinutes(0);
            return (
                <div>
                    <h1 className="hi">Super Converter</h1>
                        <div>
                            <label htmlFor="minutes">Minutes</label>
                            <input 
                            value={minutes} 
                            id="minutes" 
                            placeholder="Minutes" 
                            type="number" 
                            onChange = {onChange}
                            />
                        </div>
                        <div>
                            <label htmlFor="hours">Hours</label>
                            <input value={Math.round(minutes / 60)} id="hours" placeholder="Hours" type="number"/>
                        </div>
                        <button onClick={reset}>Reset</button>
                </div>
          );
        }
        const root = document.getElementById("root");
        ReactDOM.render(<App />, root);
    </script>
</html>

profile
console.log("불꽃남자 정대만"); 🏀❤

0개의 댓글