// 단위 변환(unit convert) 앱 만들기
<!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">
function App() {
const [minutes, setMinutes] = React.useState(0);
const onChange = (event) => {
setMinutes(event.target.value);
}
const reset = () => setMinutes(0);
return (
<div>
<h1 className="hi">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"
disabled
/>
</div>
<button onClick={reset}>Reset</button>
</div>
);
}
const root = document.getElementById("root");
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">
function App() {
const [amount, setAmount] = React.useState(0);
const [inverted, setInverted] = React.useState(false);
const onChange = (event) => {
setAmount(event.target.value);
}
const reset = () => setAmount(0);
// true <-> false 현재 값의 반대로 변경
const onFlip = () =>{
reset();
setInverted(current => !current)
};
return (
<div>
<h1 className="hi">Super Converter</h1>
<div>
<label htmlFor="minutes">Minutes</label>
<input
value={inverted ? amount * 60 : amount}
id="minutes"
placeholder="Minutes"
type="number"
onChange={onChange}
disabled={inverted === true}
/>
</div>
<div>
<label htmlFor="hours">Hours</label>
<input
value={inverted ? amount : Math.round(amount / 60)}
id ="hours"
placeholder="Hours"
type="number"
disabled={!inverted} // js 조건문 사용 가능
onChange={onChange}
/>
</div>
<button onClick={reset}>Reset</button>
<button onClick={onFlip}>{inverted? "Turn back": "Invert"}</button>
</div>
);
}
const root = document.getElementById("root");
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">
function MinutesToHours() {
const [amount, setAmount] = React.useState(0);
const [inverted, setInverted] = React.useState(false);
const onChange = (event) => {
setAmount(event.target.value);
}
const reset = () => setAmount(0);
// true <-> false 현재 값의 반대로 변경
const onFlip = () =>{
reset();
setInverted(current => !current)
};
return (
<div>
<div>
<label htmlFor="minutes">Minutes</label>
<input
value={inverted ? amount * 60 : amount}
id="minutes"
placeholder="Minutes"
type="number"
onChange={onChange}
disabled={inverted === true}
/>
</div>
<div>
<label htmlFor="hours">Hours</label>
<input
value={inverted ? amount : Math.round(amount / 60)}
id ="hours"
placeholder="Hours"
type="number"
disabled={!inverted} // js 조건문 사용 가능
onChange={onChange}
/>
</div>
<button onClick={reset}>Reset</button>
<button onClick={onFlip}>{inverted? "Turn back": "Invert"}</button>
</div>
);
}
function KmToMiles() {
const [amount, setAmount] = React.useState(0);
const [inverted, setInverted] = React.useState(false);
const onChange = (event) => {
setAmount(event.target.value);
}
const reset = () => {setAmount(0);}
const onFlip = () => {
reset();
setInverted(current=> !current);
}
return (
<div>
<div>
<label htmlFor="Km">Km</label>
<input
value={inverted? amount * 1.609344 : amount}
id="Km"
type="number"
placeholder="Km"
onChange={onChange}
disabled={inverted === true}
/>
</div>
<div>
<label htmlFor="Miles">Miles</label>
<input
value={inverted? amount : amount/1.609344}
id="Miles"
type="number"
placeholder="Miles"
onChange={onChange}
disabled={!inverted}
/>
</div>
<button onClick={reset}>Reset</button>
<button onClick={onFlip}>{inverted? "Turn back": "Invert"}</button>
</div>
);
}
function App() { // root div를 그려주는 App 컴포넌트
const [index, setIndex] = React.useState("xx");
const onSelect = (event) => {
setIndex(event.target.value);
}
//선택 메뉴 만들기
return (
<div>
<h1 className="hi">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>
<hr />
{index === "xx"? "Please select your units" : null}
{index === "0"? <MinutesToHours/> : null}
{index === "1"? <KmToMiles/> : null}
</div>
);
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);
</script>
</html>
'Dev > React' 카테고리의 다른 글
| [React] #5. Intro- React App 만들기 (0) | 2022.05.27 |
|---|---|
| [React] #4. Props (0) | 2022.05.26 |
| [React] #3. State (0) | 2022.05.23 |
| [React] #2. The Basic of React - JSX (0) | 2022.05.23 |
| [React] #1. The Basic of React - Events in React (0) | 2022.05.17 |
