WEB/React

[영화 웹] #3.9 Final Practice and Recap | challenge

Harimad 2022. 1. 26. 20:09

App 컴포넌트에 index값을 useState함수로 만든다

리턴값에 select + option Tag를 만들고, option에 value 값을 미리 설정해 놓는다.

option의 값이 바뀌면 select Tag에 onChange Event가 발생하도록 한다.

event가 발생할때마다 setIndex함수로 index값을 바꾸도록 한다.

index값에 따라서 MinutesToHours나 KmToMiles 컴포넌트가 보이도록 선택할 수 있다.

<!DOCTYPE html>
<html>

<body>
<div id="root"></div>
<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.querySelector('#root');

function MinutesToHours() {
    const [amount, setAmount] = React.useState(0);
    const [flipped, setFlipped] = React.useState(false);
    const onChange = (event) => {
        setAmount(event.target.value);
    };
    const reset = () => setAmount(0);
    const onFlip = () => {
        reset();
        setFlipped(current => !current); //true < - > false
    }
    return (
        <div>
            <div>
                <label htmlFor="minutes">Minutes</label>
                <input
                    value={flipped ? amount * 60 : amount} //UI로 값을 보여주는 역할
                    id="minutes"
                    placehoder="Minutes"
                    type="number"
                    onChange={onChange} //데이터를 업데이트 해주는 역할
                    disabled={flipped === true}
                />
            </div>

            <div>
                <h4>You want to convert: {amount}</h4>

                <label htmlFor="hours">Hours</label>
                <input
                    value={flipped ? amount : Math.round(amount / 60)}
                    id="hours"
                    placehoder="Hours"
                    type="number"
                    onChange={onChange}
                    disabled={flipped === false}
                />
            </div>
            <button onClick={reset}>Reset</button>
            <button onClick={onFlip}>{flipped ? 'Flip: T' : 'Flip: F'}</button>
        </div>
    );
};

function KmToMiles() {
    const [data, setData] = React.useState();
    const onChange = (event) => {
        setData(event.target.value);
    }
    const resetData = () => {
        setData(0);
    }
    const [flag, setFlag] = React.useState(false);
    const onChangeFlag = () => {
        resetData();
        setFlag(flag => !flag);
    }

    return (
        <div>
            <div>
                <label htmlFor="km">km</label>
                <input
                    value={flag ? Math.round(data * 1.60934) : data}
                    id="km"
                    type="number"
                    placeholder="km적으세요"
                    onChange={onChange}
                    disabled={flag === true}
                />
            </div>
            <h3>당신이 적은 data : {data} </h3>
            <div>
                <label htmlFor="miles">miles</label>
                <input
                    value={flag ? data : Math.round(data * 0.621371)}
                    id="miles"
                    type="number"
                    placeholder="miles적으세요"
                    onChange={onChange}
                    disabled={flag === false}
                />
            </div>
            <button onClick={resetData}>Reset</button>
            <button onClick={onChangeFlag}>Flag : {flag ? 'T' : 'F'}</button>
        </div >
    )
}

function App() {
    const [index, setIndex] = React.useState("xx");
    const onSelect = (event) => {
        setIndex(event.target.value); //update용
    }
    return (
        <div>
            <h1>Super Converter</h1>
            <select value={index} onChange={onSelect}>
                <option value='xx'>Select your units</option>
                <option value='0'>Minutes & Hours</option>
                <option value='1'>Km & Miles</option>
            </select>

            {index === 'xx' ? "Please select your units" : null}
            {index === '0' ? <MinutesToHours /> : null}
            {index === '1' ? <KmToMiles /> : null}
        </div>
    ); //value={index}는 보여주는 UI용
}
ReactDOM.render(<App />, root);
</script>
</body>

</html>

아래는 실행코드

 

저작자표시 비영리 변경금지 (새창열림)