리액트스터디 - React.useState() 심화 20220706

onChange 프로퍼티에 익명함수(변수)를 전달하는 것.

event로 받아온 것을 event.target.value 밸류로 접근하는 것.

jsx는 html과 다른점이 몇가지 있다. 변수를 할당할때 ${}이 아닌 {}으로 인식하고

 

class이름은 className

for는 htmlFor

이런식으로 다른 프로퍼티들이 존재함.

 

<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
    //root id를 가져오고
    const root = document.getElementById("root");
    function Container() {
        let [minutes, setMinutes] = React.useState(1);
        
        const onChange = (event)=>{
            setMinutes(event.target.value);
        };

        return(
        <div>
            <h1 className="hi">Super Converter</h1>
            <h2>지금은 몇분? {minutes}</h2>
            
            <label htmlFor="minutes">Minutes</label>
            <input value={minutes} className ="minutes" type="number" onChange={onChange}/>
        </div>)
    };

    ReactDOM.render(<Container/>,root); // 리액트 DOM에 렌더한다(컨테이터를, root에);
</script>