<!DOCTYPE html>
<html>
<head></head>
<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 [flipped, setFlipped] = React.useState(false);
//useState() 안의 값은 minutes의 default값
const onChange = (event) => {
setAmount(event.target.value);
};
const reset = () => setAmount(0);
const onFlip = () => {
reset();
setFlipped((current) => !current);
}; // true false 상태 반대로 설정해줌
return (
<div>
<div>
<label for = "minutes">Mintes</label>
<input
value = {flipped ? amount * 60 : amount}
id = "minutes"
placeholder = "Minutes"
type = "number"
onChange = {onChange} // 데이터 업데이트 해주는 함수
disabled = {flipped}
/>
</div>
<div>
<label for = "hours">Hours </label>
<input
value = {flipped ? amount : Math.round(amount / 60)}
// 만약 flipped 상태라면 (true), 단위 변환을 보여주지 마! 현재 값만 보여줘
id = "hours"
placeholder = "Hours"
type = "number"
onChange = {onChange}
disabled = {!flipped}
/>
</div>
<button onClick={reset}>Reset</button>
<button onClick={onFlip}>Flip</button>
</div>
);
}
function KmToMiles() {
const [amount, setAmount] = React.useState(0);
const [flipped, setFlipped] = React.useState(false);
//useState() 안의 값은 minutes의 default값
const onChange = (event) => {
setAmount(event.target.value);
};
const reset = () => setAmount(0);
const onFlip = () => {
reset();
setFlipped((current) => !current);
}; // true false 상태 반대로 설정해줌
return (
<div>
<div>
<label for = "km">KM </label>
<input
value = {flipped ? amount / 1.609 : amount}
id = "km"
placeholder = "KM"
type = "number"
onChange = {onChange} // 데이터 업데이트 해주는 함수
disabled = {flipped}
/>
</div>
<div>
<label for = "miles">Miles </label>
<input
value = {flipped ? amount : amount * 1.609}
// 만약 flipped 상태라면 (true), 단위 변환을 보여주지 마! 현재 값만 보여줘
id = "miles"
placeholder = "Miles"
type = "number"
onChange = {onChange}
disabled = {!flipped}
/>
</div>
<button onClick={reset}>Reset</button>
<button onClick={onFlip}>Flip</button>
</div>
);
}
function App() {
const [index, setIndex] = React.useState("xx")
const onSelect = (event) => {
setIndex(event.target.value);
};
console.log('render w/', index);
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>
<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>
<!--
useState는 array를 제공
첫 번째 element가 현재의 값
두 번째는 value를 수정하고 component를 새로고침할 때 쓰는 함수
-->
https://nomadcoders.co/react-for-beginners
ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders
React for Beginners
nomadcoders.co
728x90
'React' 카테고리의 다른 글
| [ReactJS] 리엑트 프로그램 생성 하는 법 (0) | 2023.02.09 |
|---|---|
| [ReactJS] 프로젝트 생성 / useEffect / CleanUp (0) | 2023.01.25 |
| [ReactJS] react_chap3.1 (0) | 2023.01.20 |
| [ReactJS] react_chap3.0 (1) | 2023.01.20 |
| [ReactJS] react_chap2 (1) | 2023.01.20 |