State | Notion

"> "> ">

<!DOCTYPE html>
<html>
    <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">
        const root = document.getElementById("root");
        function App() {
            const [counter, setCounter] = React.useState(0);
            const onClick = () => {
                setCounter((current) => current + 1);
            }
            return (
                <div>
                    <h3>Total clicks: {counter}</h3>
                    <button onClick={onClick}>Click me</button>
                </div>
            )
        }
        ReactDOM.render(<App />, root);
    </script>
</html>

이전의 Vanilla js를 사용해서 카운팅 했던 것과 동일하게 동작한다.
하지만 코드가 훨씬 간결한 것을 알 수 있다.
userState 는 길이 2를 가지는 배열을 Return 하는데, 첫번째는 초기값, 두번째는 함수이다.
React.userState(0) 에서 초기값을 세팅 해주고, counter와 setCounter를 변수로 세팅했다.
onClick 함수에서 seCounter가 일어날 때 마다 counter+1을 해주었다.
useState에서 반환되는 함수는 매번 Rendering을 해 줄 필요 없이 자동으로 변경된 점을 감지하여 html을 Redering 해준다.
또한 모든 element를 Re-Rendering 하는 것이 아닌 변경된 Element만을 감지하여 Re-Rendering 해준다.

<!DOCTYPE html>
<html>
    <body>
        <div id="root"></div>
    </body>
    <script src="<https://unpkg.com/[email protected]/umd/react.development.js>"></script>
    <script src="<https://unpkg.com/[email protected]/umd/react-dom.development.js>"></script>
    <script src="<https://unpkg.com/@babel/standalone/babel.min.js>"></script>
    <script type="text/babel">
        const root = document.getElementById("root");
        function MinutesToHours() {
            const [minutes, setMinutes] = React.useState(0);
            const [flipped, setFlipped] = React.useState(false);
            const onChange = (event) => {
                setMinutes(event.target.value);
            }
            const reset = () => setMinutes(0)
            const onFlip = () => {
                reset();
                setFlipped((current) => !current);
            }
            return (
                <div>
                    <label htmlFor="minutes">Minutes</label>
                    <input disabled={flipped === true} value={flipped ? minutes*60 : minutes} id="minutes" placeholder="Minutes" type="number" onChange={onChange}/>
                    <h4>You want to convert {minutes}</h4>
                    <label htmlFor="hours">Hours</label>
                    <input disabled={flipped === false} value={flipped ? minutes : minutes/60} id="hours" placeholder="Hours" type="number" onChange={onChange}/>
                    <button onClick={reset}>Reset</button>
                    <button onClick={onFlip}>{flipped ? "Turn Back" : "Invert"}</button>
                </div>
            );
        }
        function KmToMiles() {
            const [distances, setDistances] = React.useState(0);
            const [flipped, setFlipped] = React.useState(false);
            const onChange = (event) => {
                setDistances(event.target.value);
            }
            const reset = () => setDistances(0)
            const onFlip = () => {
                reset();
                setFlipped((current) => !current);
            }
            return (
                <div>
                    <label htmlFor="km">KM</label>
                    <input disabled={flipped === true} value={flipped ? distances*1.61 : distances} id="km" placeholder="KM" type="number" onChange={onChange}/>
                    <h4>You want to convert {distances}</h4>
                    <label htmlFor="miles">Miles</label>
                    <input disabled={flipped === false} value={flipped ? distances : distances/1.61} id="miles" placeholder="Miles" type="number" onChange={onChange}/>
                    <button onClick={reset}>Reset</button>
                    <button onClick={onFlip}>{flipped ? "Turn Back" : "Invert"}</button>
                </div>
            );
        }
        function App() {
            const [index, setIndex] = React.useState("xx");
            const onSelect = (event) => {
                setIndex(event.target.value);
            }
            return (
                <div>
                    <h1>Super Converter</h1>
                    <select onChange={onSelect}>
                        <option value="xx">Select you Units</option>
                        <option value="0">Minutes & Hours</option>
                        <option value="1">Km & Miles</option>
                    </select>
                    <hr />
                    {index === "xx" ? <h3>Please Select your Units</h3> : null }
                    {index === "0" ? <MinutesToHours /> : null}
                    {index === "1" ? <KmToMiles /> : null}
                </div>
            );
        }
        ReactDOM.render(<App />, root);
    </script>
</html>