1. 기능 구현
1. 시간 <-> 분
2. Km <-> Meter
<!DOCTYPE html>
<html lang="ko">
<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>React Start</title>
<!--react cdn-->
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<!--babel cdn-->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<!--기본 div root 생성-->
<div id="root"></div>
<script type="text/babel">
function SecondToHours() {
const [amount, setAmount] = React.useState(0)
const [fliped, setFliped] = React.useState(false)
const reset = (e) => {
setAmount(0)
}
const Flip = (e) => {
setFliped((current) => !current)
reset()
}
return(
<div>
<h1>Time Converter</h1>
<input disabled = {fliped === true} type="number" value = {fliped ? amount*60 : amount} onChange = {(e)=>setAmount(e.target.value)} />
<br />
<input disabled = {fliped === false} type="number" value={fliped ? amount : Math.round(amount/60)} onChange = {(e)=>setAmount(e.target.value)} />
<br/>
<button onClick = {reset}>RESET</button>
<button onClick = {Flip}>{fliped ? "Hour To Minutes" : "Minutes To Hour"}</button>
</div>
)
}
function KmToMeter() {
const [amount, setAmount] = React.useState(0)
const [fliped, setFliped] = React.useState(false)
const reset = (e) => {
setAmount(0)
}
const Flip = (e) => {
setFliped((current) => !current)
reset()
}
return(
<div>
<h1>Distance Converter</h1>
<input disabled = {fliped === true} type="number" value = {fliped ? amount*1000 : amount} onChange = {(e)=>setAmount(e.target.value)} />
<br />
<input disabled = {fliped === false} type="number" value={fliped ? amount : Math.round(amount/1000)} onChange = {(e)=>setAmount(e.target.value)} />
<br/>
<button onClick = {reset}>RESET</button>
<button onClick = {Flip}>{fliped ? "Meter To Km" : "Km To Meter"}</button>
</div>
)
}
function App () {
const [index, setIndex] = React.useState(0)
const onSelect = (e) => {
setIndex(e.target.value)
}
return(
<div>
<h1>SUPER CONVERTER</h1>
<select value={index} onChange={onSelect}>
<option value="0">Select ur Unit</option>
<option value="1">SecondToHours</option>
<option value="2">KmToMeter</option>
</select>
<hr />
{index === "0" ? <h3>Select ur Unit</h3> : null }
{index === "1" ? <SecondToHours /> : null }
{index === "2" ? <KmToMeter /> : null }
</div>
)
}
//ReactDom을 이용하여, root Div에 Counter Render
ReactDOM.render(
<App />, document.getElementById("root")
)
</script>
</body>
</html>'F.E > React' 카테고리의 다른 글
| [React] 함수형 컴포넌트에서 props 사용하기. (0) | 2022.05.05 |
|---|---|
| [React] 함수로 props 사용하여 소문자 혹은 대문자로 바꾸기 (0) | 2022.05.05 |
| [React] Minutes to Hours And Hours to Minutes (0) | 2022.05.04 |
| [React] CDN으로 시작하기 (0) | 2022.05.04 |
| [React] 컴포넌트 빌드하기 (0) | 2022.05.02 |