<!-- //바뀌는 데이터 : state -->
<!DOCTYPE html>
<html>
<head>
    <!-- <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title> -->
</head>
<body> 
    <div id="root"></div> 
    <!-- <span>Total clicks: 0</span>
    <button id="btn">Click me</button> -->
</body> 
<script src="<https://unpkg.com/[email protected]/umd/react.production.min.js>"> </script> 
<script src="<https://unpkg.com/[email protected]/umd/react-dom.production.min.js>">  </script> 
<script src="<https://unpkg.com/@babel/standalone/babel.min.js>"></script> 
<script type="text/babel">
    const root = document.getElementById("root");
    let counter = 0; 
    function countUp(){
        counter = counter +1;
        render();
    }
    function render(){
        ReactDOM.render(<Container />, root);
    }
    const Container = () =>(
        <div> 
            <h3>Total clicks: {counter}</h3>
            <button onClick={countup}>Click me</button>
            </div>
    );
    render();
    </script>
</html>
<!-- //reactdom 부터 실행 - <div>가  reactelement
//그러나 여기 코드에서 컨테이너를 rerendering안해줌 -->

reactjs는 다른부분만 파악
따라서 totlaclicks 다시 생성할필요없어 좋
그러나 render해주는 것을 잊으면 안되기 때문에 좋은방식은 아님

function App() {
        const [counter, setCounter] = React.useState(0);
        const onClick=()=>{

            //setCounter(counter +1);  setCounter(5);
            setCounter((current) => current +1);
        };
        return  (
        <div> 
            <h3>Total clicks: {counter}</h3>
            <button onClick={countup}>Click me</button>
        </div>
    );
    }

현재 state 바탕으로 다음 state계산하고 싶다면-함수 사용
state 세팅 -1 직접값 설정
        -2 함수 전달

3.5
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>박현빈웹스터디갱</title>
</head>
<body>
    <div id="root"></div>
</body>

<script src="<https://unpkg.com/[email protected]/umd/react.production.min.js>"> </script> 
<script src="<https://unpkg.com/[email protected]/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, steMinutes]= React.useState() //jsx react
        const onChange =() => {
            console.log("somebody wrote")
        };
        return (
            <div>
                <h1>super converter</h1>
                <label>Minutes</label>
                <input 
                value={minutes} 
                id="minutes" 
                placeholder="Minutes" 
                type="number"
                onChange={onChange}
                />
                <input id="hours" placeholder="Hours" type="number" />

            </div>
        );
    }
    const root = document.getElementById("root");
    ReactDOM.render(<App />, root);
</script>
</html>

//데이터 업데잍 - setState 함수 사용

3.7

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>박현빈웹스터디갱</title>
</head>
<body>
    <div id="root"></div>
</body>

<script src="<https://unpkg.com/[email protected]/umd/react.production.min.js>"> </script> 
<script src="<https://unpkg.com/[email protected]/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, steMinutes]= React.useState() //jsx react
        const [flipped, setFlipped] = React.useState(false)
        const onChange =() => {
            setMinutes(event.target.value);
        };
        const reset = () => setMinutes(0);
        const onFlip = () => setFlipped(!flipped);
        return (
            <div>
                <label htmlFor="minutes">Minutes</label>
                <input 
                value={minutes} 
                id="minutes" 
                placeholder="Minutes" 
                type="number"
                onChange={onChange}
                />
                <input id="hours" placeholder="Hours" type="number" />
           
            <button onClick={reset}>Reset</button>
            <button onClick={onFlip}>Reset</button>
        </div>
        );
    }
    const root = document.getElementById("root");
    ReactDOM.render(<App />, root);
</script>
</html>