본문 바로가기
CS Study/React

3. State

Ryannn 2022. 4. 16. 22:50

#state를 적용 안했을 때

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <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>
    <div id = "root"></div>
    <script type = "text/babel">
        /*const root = document.getElementById("root");
        let counter = 0;
        function countUp(){
            counter++;
        }
        const Container = () => (
            <div>
                <span>Total Clicks : {counter}</span>
                <button onClick = {countUp}>Click Me!</button>
            </div>
        )
        
        ReactDOM.render(<Container />,root);*/
        //렌더링은 한번만 일어나기 때문에 span태그의 counter값은 변하지 않음->countUp 호출 때마다 렌더링 해야함

        const root = document.getElementById("root");
        let counter = 0;
        function countUp(){
            counter++;
            render();
        }
        function render(){
            ReactDOM.render(<App />,root);
        }
        const App = () => (
            <div>
                <span>Total Clicks : {counter}</span>
                <button onClick = {countUp}>Click Me!</button>
            </div> 
        ) 
        render();
        //countUp때마다 렌더링
        //render()를 호출해도 새 Container을 생성하는 것이 아니라 react.js가 알아서 바뀐부분만 새로 생성함.

 

#state를 사용했을 때

React.useState(default)는 array return

let [value, modifier] = React.useState(default) 에서 modifier함수는 value를 지정하는 역할을 한다.

 

이렇게 하면,

새로운 APP을 생성하는 것이 아니라

React.js가 알아서 바뀐부분(count)만 새로 생성함!

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <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>
    <div id = "root"></div>
    <script type = "text/babel">
        const root = document.getElementById("root");
        function App(){
            let [counter, modifier] = React.useState(0);//counter와 modifier에 값 할당,useState는 배열 return
            const onClick = () =>{
                modifier(counter + 1);//어떤 값을 부여하든 modifier 함수는 그 값으로 업데이트하고 리렌더링을 일으킴
            }
            return(
                <div>
                    <span>Total Clicks : {counter}</span>
                    <button onClick = {onClick}>Click Me!</button>
                </div> 
            )
        }
        ReactDOM.render(<App />,root);
    
    </script>

    
</body>
</html>

 

#State를 활용한 일반단위변환기

flip 버튼을 클릭하기 전엔 시간을 분으로 바꿔주고,

flip 버튼을 클릭하면 분을 시간으로 바꿔준다.

reset 버튼을 클릭하면 모든 값이 0이 된다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <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>
    <div id = "root"></div>
    <script type = "text/babel">
        function App() {
            const [amount, setAmount] = React.useState(0);//minutes의 default값 0
            const [flipped, setFlip] = React.useState(false);
            const onChange =(event) => {
                setAmount(event.target.value);//event.target은 input, input의 value를 minutes의 값으로 할당
            }
            const reset = () =>{
                setAmount(0);
            }
            const flip =() =>{
                reset();
                setFlip((current) => !current);
            }
            return(
                <div>
                    <h1>Super Converter</h1> 
                    <div>
                        <label htmlFor = "minutes">Minutes</label>
                        <input value = {flipped ? amount*60 : amount} onChange = {onChange} placeholder = "minutes" type = "number" disabled = {flipped}></input>
                    </div>
                    <div>
                        <label htmlFor = "hours">Hours</label>
                        <input value = {flipped ? amount : Math.round(amount/60)} onChange = {onChange} placeholder = "hours" type = "number" disabled = {!flipped}></input>
                    </div>
                    <button onClick = {reset}>Reset</button>
                    <button onClick = {flip}>Flip</button>
                </div>
            );
        }
        const root = document.getElementById("root");
        ReactDOM.render(<App />, root);
    </script>

    
</body>
</html>

 

#State를 활용한 복합단위변환기

선택된 option에 따라

MinutesToHours / KmToMiiles 컴포넌트 호출

 

각각의 컴포넌트 동작원리는 일반단위변환기와 같습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <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>
    <div id = "root"></div>
    <script type = "text/babel">
        function MinutesToHours() {
            const [amount, setAmount] = React.useState(0);//minutes의 default값 0
            const [flipped, setFlip] = React.useState(false);
            const onChange =(event) => {
                setAmount(event.target.value);//event.target은 input, input의 value를 minutes의 값으로 할당
            }
            const reset = () =>{
                setAmount(0);
            }
            const flip =() =>{
                reset();
                setFlip((current) => !current);
            }
            return(
                <div>
                    <div>
                        <label htmlFor = "minutes">Minutes</label>
                        <input value = {flipped ? amount*60 : amount} onChange = {onChange} placeholder = "minutes" type = "number" disabled = {flipped} id = "minutes"></input>
                    </div>
                    <div>
                        <label htmlFor = "hours">Hours</label>
                        <input value = {flipped ? amount : Math.round(amount/60)} onChange = {onChange} placeholder = "hours" type = "number" disabled = {!flipped} id = "hours"></input>
                    </div>
                    <button onClick = {reset}>Reset</button>
                    <button onClick = {flip}>Flip</button>
                </div>
            );
        }
        function KmToMiles(){
            const [amount, setAmount] = React.useState(0);
            const [flipped, setFlip] = React.useState(false);
            const onChange = (event) =>{
                setAmount(event.target.value);
            }
            const reset = () => {
                setAmount(0);
            }
            const flip = () => {
                reset();
                setFlip(!flipped);
            }
            return(
                <div>
                    <div>
                        <label htmlFor = "kilo">Kilometer</label>
                        <input 
                        type = "number"
                        id ="kilo"
                        placeholder = "Kilometer"
                        onChange ={onChange}
                        value = {flipped ? amount*1.609344 : amount}
                        disabled = {flipped}></input>
                    </div>
                    <div>
                        <label htmlFor = "miles">Miles</label>
                        <input 
                        type = "number"
                        id = "miles"
                        placeholder = "miles"
                        onChange = {onChange}
                        value = {flipped ? amount : amount/1.609344}
                        disabled = {!flipped}></input>
                    </div>
                    <button onClick = {reset}>Reset</button>
                    <button onClick = {flip}>Flip</button>
                </div>
            )

        }
        function App(){
            const [index, setIndex] = React.useState("-1");
            const onChange =(event)=>{
                setIndex(event.target.value);
            }
            return (
                <div>
                    <h1>Super Converter</h1>
                    <select onChange = {onChange}>
                        <option value ="-1">Please select
                        </option>
                        <option value = "0">Minutes & Hours
                        </option>
                        <option value = "1">Km & Miles
                        </option>
                    </select>
                    <hr />
                    {index == "0" ? <MinutesToHours /> : null}
                    {index == "1" ? <KmToMiles /> : null}
                </div>
            )
        }
        const root = document.getElementById("root");
        ReactDOM.render(<App />, root);
    </script>

    
</body>
</html>
저작자표시 (새창열림)

'CS Study > React' 카테고리의 다른 글

5. Effects  (0) 2022.04.18
4. Props  (0) 2022.04.18
2. JSX  (0) 2022.04.15
1. 왜 React 인가?  (0) 2022.04.15

'CS Study/React' Related Articles

티스토리툴바