ReactJS part 3.7

정유영·2022년 3월 23일
0

Flip

<html lang="ko">

<body>
    <div id="root"></div>
</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>
<script type="text/babel">
    const root = document.querySelector("#root");
    function App() {
        const [amount, setAmount] = React.useState("");
        const [flipped, setFlipped] = React.useState(false);
        const onChange = (event) => {
            setAmount(event.target.value);
        };
        const reset = () => setAmount(0)
        const onFlip = () => {
            reset();
            setFlipped((current) => !current);
        };
        return (
            <div>
                <h1>converter</h1>
                <div>
                <label htmlfor="minutes">Minutes</label>
                    <input 
                    value={flipped ? amount * 60 : amount} 
                    id="minutes" 
                    placeholder="Minutes" 
                    type="number"
                    onChange={onChange}
                    disabled={flipped}
                />
                </div>
                <div>
                <label htmlfor="hours">Hours</label>
                
                <input
                    value={flipped ? amount : Math.round(amount / 60)}
                    id="hours"
                    placeholder="Hours"
                    type="number"
                    disabled={!flipped}
                />
                </div>
                <button onClick={reset}>Reset</button>
                <button onClick={onFlip}>Flip</button>
            </div>
        );
    }
    ReactDOM.render(<App />, root);
</script>
</html>

flip
const onFlip = () => setFlipped(!flipped);
-> flipped가 true라면 부정명제인 !flipped는 false
-> false라면 true

state값으로 input을 enabled할지 disabled 할지를 결정할 수 있음

디폴트 값이 false 라고 정했으므로 Hours는 disabled 되어야함
그래서 disabled={flipped === false}를 써줘서
flipped가 false라면, disabled는 true가 되도록 만들어줌
Minuets에는 반대로
disabled={flipped === true}라고 써줌
그러나
Hours는
disabled={!flipped}
Minuets에는 반대로
disabled={flipped}
주는게 더 짧고 좋음

시간 -> 분 컨버터
삼항연산자(ternary operator) 사용하기
flipped ? amount : amount / 60
-> 만약 flipped 상태면 state에 있는 값을 그대로 보여주기
아니라면 60으로 나눈 변환된 값 보여주기
value={flipped ? amount * 60 : amount}
-> 만약 flipped 상태면 60으로 곱한 변환된 값 보여주기
아니라면 state에 있는 값을 그대로 보여주기

flip누르면 변화된 값 그대로 가져오므로
onFlip 변수에 reset(); 넣어주기

profile
안녕하세요.

0개의 댓글