노마드코더 ReactJS

Computer Science/FrontEnd

노마드코더 ReactJS | #3 State

토마토. 2022. 4. 12. 11:31

#3 State

준비물

<!DOCTYPE html>
<html>
    <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">
        const root = document.getElementById("root");
        const Container = () => (
            <div>
                <h3>Total click : 0</h3>
                <button>Click me</button>
        </div>
        );
        ReactDOM.render(<Container />, root);// 페이지에 위치시키기
    </script>
</html>

#3.0 Understanding State

step 1. 바인딩

            <div>
                <h3>Total click : {counter}</h3>
                <button onClick={countUp}>Click me</button>
        </div>

step 2. UI 업데이트

        function render(){
            ReactDOM.render(<Container />, root);// 페이지에 위치시키기
        }

<!DOCTYPE html>
<html>
    <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">
        const root = document.getElementById("root");
        let counter = 0;

        function render(){
            ReactDOM.render(<Container />, root);// 페이지에 위치시키기
        }
        function countUp(){
            counter = counter + 1;
            render();// 페이지에 위치시키기
        }

        function Container() {
            return (
                <div>
                    <h3>Total click : {counter}</h3>
                    <button onClick={countUp}>Click me</button>
                </div>
            )
        }
        render();// 페이지에 위치시키기
    </script>
</html>

React.JS는 딱 변경된 부분만 업데이트된다.

=> 이걸 이용해서 인터렉티브한 웹을 만들 수 있다.

#3.1 setState part One

1. 컴포넌트를 추가하고 싶을 때 {} 안에 넣으면 됨

2. UI를 업데이트하고 싶다면, render()를 호출할 것

리랜더링을 하는 더 효율적인 방식이 있을까?

어디에 데이터를 받을 수 있을까?

리액트 js에는 적절한 툴이 있음.

            const data = React.useState();
            console.log(data);

data는 array[undefined, f] : data값, data값을 바꾸는 함수

이제는 data 값을 바꿔주는 함수를 직접 실행할 필요가 없다.

그러면..?

const [myFav, pot] = food
undefined
myFav
'tomato'

            const [counter, modifier] = React.useState(0);

#3.2 setState part Two

render 함수를 다시 호출하지 않고,

UI를 업데이트할 수는 없을까?

            const [counter, modifier] = React.useState(0);
            const onClick = () => {
                modifier(10);
            };

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

#3.3 Recap

데이터가 바뀔 때마다 컴포넌트를 업데이트하되,

바뀐 부분만을 업데이트한다.

#3.4 state Functions

앱의 state를 바꾸는 법

더 안전하게 current 값을 바꿀 수 있다. (함수를 전달해서 하는 것)

                setCounter((current)=>current+1);

#3.5 Inputs and state

- Unit conversion

- money converter

원래 HTML이라면, 다음 코드 같이 할 것.

                <div>
                    <h1>Super converter</h1>
                    <label for="minutes">Minutes</label>
                    <input id="minutes" placeholder="Minutes" type="number"/>
                    <label for="hours">Hours</label>
                    <input id="hours" placeholder="Hours" type="number"/>
                </div>

But, React JS에서는 다르게 표현해주어야 함.

                <div>
                    <h1>Super converter</h1>
                    <label htmlFor="minutes">Minutes</label>
                    <input id="minutes" placeholder="Minutes" type="number"/>
                    <label htmlFor="hours">Hours</label>
                    <input id="hours" placeholder="Hours" type="number"/>
                </div>

중간단계 1

<!DOCTYPE html>
<html>
    <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">
        const root = document.getElementById("root");
        
        function App() {
            const [minutes, setMinutes] = React.useState();
            const onChange = () => {
                minutes = minutes.number
                console.log("changed");
            }
            return (
                <div>
                    <h1>Super converter</h1>
                    <label htmlFor="minutes">Minutes</label>
                    <input 
                        value={minutes} 
                        id="minutes" 
                        placeholder="Minutes" 
                        type="number"
                        onChange={onChange}/>
                    <label htmlFor="hours">Hours</label>
                    <input id="hours" placeholder="Hours" type="number"/>
                </div>
            );
        }
        ReactDOM.render(<App />, root);// 페이지에 위치시키기
        // 페이지에 위치시키기
    </script>
</html>

끝!!!!

            const onChange = () => {
                console.log(event.target.value);
            }

#3.6 State Practice part one

state를 가져옴

input value를 state와 연결하엿음

데이터를 업데이트해준다

onChange로 업데이트

하나의 state를 듣는 두 개의 input

onChange event

<!DOCTYPE html>
<html>
    <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">
        const root = document.getElementById("root");
        
        function App() {
            const [minutes, setMinutes] = React.useState(0);
            const onChange = () => {
                setMinutes(event.target.value);
            }
            const reset = () => setMinutes(0);
            return (
                <div>
                    <h1>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>
            );
        }
        ReactDOM.render(<App />, root);// 페이지에 위치시키기
        // 페이지에 위치시키기
    </script>
</html>

#3.7 State Practice part two

<!DOCTYPE html>
<html>
    <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">
        const root = document.getElementById("root");
        
        function App() {
            const [minutes, setMinutes] = React.useState(0);
            const [flipped, setFlipped] = React.useState(false);
            const onChange = () => {
                setMinutes(event.target.value);
            };
            const reset = () => setMinutes(0);
            const onFlip = () => setFlipped((current)=>!current);
            return (
                <div>
                    <h1>Super converter</h1>
                    <div>
                        <label htmlFor="minutes">Minutes</label>
                        <input 
                            value={!flipped ? minutes : minutes * 60} 
                            id="minutes" 
                            placeholder="Minutes" 
                            type="number"
                            onChange={onChange}
                            disabled={flipped}/>
                    </div>
                    <div>
                        <label htmlFor="hours">Hours</label>
                        <input 
                            value={flipped ? minutes : Math.round(minutes/60)}
                            id="hours" placeholder="Hours" type="number"
                            disabled={!flipped}
                            onChange={onChange}/>
                    </div>
                    <button onClick={reset}>Reset</button>
                    <button onClick={onFlip}>Flipped</button>
                </div>
            );
        }
        ReactDOM.render(<App />, root);// 페이지에 위치시키기
        // 페이지에 위치시키기
    </script>
</html>

#3.8 recap

#3.9 Final Practice and recap

<!DOCTYPE html>
<html>
    <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">
        const root = document.getElementById("root");
        function MinutesToHours() {
            const [minutes, setMinutes] = React.useState(0);
            const [flipped, setFlipped] = React.useState(false);
            const onChange = () => {
                setMinutes(event.target.value);
            };
            const reset = () => setMinutes(0);
            const onFlip = () => setFlipped((current)=>!current);
            return (
                <div>
                    <div>
                        <label htmlFor="minutes">Minutes</label>
                        <input 
                            value={!flipped ? minutes : minutes * 60} 
                            id="minutes" 
                            placeholder="Minutes" 
                            type="number"
                            onChange={onChange}
                            disabled={flipped}/>
                    </div>
                    <div>
                        <label htmlFor="hours">Hours</label>
                        <input 
                            value={flipped ? minutes : Math.round(minutes/60)}
                            id="hours" placeholder="Hours" type="number"
                            disabled={!flipped}
                            onChange={onChange}/>
                    </div>
                    <button onClick={reset}>Reset</button>
                    <button onClick={onFlip}>Flipped</button>
                </div>
            );
        }
        function App() {
            return (
                <div>
                    <h1>Super converter</h1>
                    <MinutesToHours/>
                </div>
            );
        }
        ReactDOM.render(<App />, root);// 페이지에 위치시키기
        // 페이지에 위치시키기
    </script>
</html>

<!DOCTYPE html>
<html>
    <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">
        const root = document.getElementById("root");
        function KmToMiles () {
            const [minutes, setMinutes] = React.useState(0);
            const [flipped, setFlipped] = React.useState(false);
            const onChange = () => {
                setMinutes(event.target.value);
            };
            const reset = () => setMinutes(0);
            const onFlip = () => setFlipped((current)=>!current);
            return (
                <div>
                    <div>
                        <label htmlFor="minutes">Km</label>
                        <input 
                            value={!flipped ? minutes : minutes * 1.609} 
                            id="minutes" 
                            placeholder="Minutes" 
                            type="number"
                            onChange={onChange}
                            disabled={flipped}/>
                    </div>
                    <div>
                        <label htmlFor="hours">Miles</label>
                        <input 
                            value={flipped ? minutes : Math.round(minutes/1.609)}
                            id="hours" placeholder="Hours" type="number"
                            disabled={!flipped}
                            onChange={onChange}/>
                    </div>
                    <button onClick={reset}>Reset</button>
                    <button onClick={onFlip}>Flipped</button>
                </div>
            );
        }
        function MinutesToHours() {
            const [minutes, setMinutes] = React.useState(0);
            const [flipped, setFlipped] = React.useState(false);
            const onChange = () => {
                setMinutes(event.target.value);
            };
            const reset = () => setMinutes(0);
            const onFlip = () => setFlipped((current)=>!current);
            return (
                <div>
                    <div>
                        <label htmlFor="minutes">Minutes</label>
                        <input 
                            value={!flipped ? minutes : minutes * 60} 
                            id="minutes" 
                            placeholder="Minutes" 
                            type="number"
                            onChange={onChange}
                            disabled={flipped}/>
                    </div>
                    <div>
                        <label htmlFor="hours">Hours</label>
                        <input 
                            value={flipped ? minutes : Math.round(minutes/60)}
                            id="hours" placeholder="Hours" type="number"
                            disabled={!flipped}
                            onChange={onChange}/>
                    </div>
                    <button onClick={reset}>Reset</button>
                    <button onClick={onFlip}>Flipped</button>
                </div>
            );
        }
        function App() {
            const [index, setIndex] = React.useState("0");
            const onSelect = (event) => {
                setIndex(event.target.value);
            };
            return (
                <div>
                    <h1>Super converter</h1>
                    <select value={index} onChange={onSelect}>
                        <option value="0">Minutes & Hours</option>
                        <option value="1">Km & Miles</option>
                    </select>
                    {index==="0" ? <MinutesToHours/> : <KmToMiles/>}
                </div>
            );
        }
        ReactDOM.render(<App />, root);// 페이지에 위치시키기
        // 페이지에 위치시키기
    </script>
</html>

'Computer Science > FrontEnd' 카테고리의 다른 글

노마드 코더 ReactJS \| #3 State (0)	2022.02.26
노마드 코더 ReactJS \| #2 The Basics of React (0)	2022.02.26
노마드 코더 ReactJS \| #1 Introduction (0)	2022.02.26
노마드 코더 JS \| #8 Weather (0)	2022.02.25
노마드 코더 JS \| #7 To Do List (0)	2022.02.25

현재글노마드코더 ReactJS | #3 State

HappyTomatoLife

기록하는 토마토

반복문, JavaScript, 조건문, Deque, linear DS, REACT, Doubly Linked List, SQL, singly linked list, linked stack, react.js, linked Queue, DS, OCaml, 교육상담, 함수형 언어, maze problem, 자료구조, binary search, Expression evaluation,

Today :
Yesterday :

일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

HappyTomatoLife