nomad code_react js로 영화앱 만들기_#3.9
2022. 11. 9. 15:02ㆍreact
# 컴포넌트 나누기 및 불러오기
<body>
<div id="root"></div>
</body>
<script type="text/babel">
function MinutesToHours() {};
function KmToMeter() {};
functon App() {
const [index, setIndex] = React.useState("xx");
const onSelect = (event) => { setIndex(event.target.value) };
return(
<div>
<h1>Super Converter</h1>
<select onChange={onSelect}>
<option value="xx">Select your units.</option>
<option value="1">Minutes & Hours</option>
<option value="2">Km & Meter</option>
</select>
<hr />
{index === "xx" ? "Please select your units" : null}
{index === "1" ? <MinutesToHours /> : null}
{index === "2" ? <KmToMeter /> : null}
</div>
);
};
const root = document.getElementById("root");
ReactDOM.render(<App />, root);
</script>select박스를 사용하여 원하는 컴포넌트를 가져오는 방법.
MinutesToHours와 KmToMeter라는 컴포넌트의 내용이 있다는 가정 하에, select로 선택된 옵션의 value값을 기준으로 원하는 컴포넌트를 그려냄
# KmToMeter
강의에서는 useState는 위 내용까지이고 Km↔mile 변환 함수를 작성해 보는 것을 권하고 있다.
나는 마일 대신 미터로 변환 함수를 작성했다.
<script type="text/babel">
function KmToMeter() {
const [amount, setAmount] = React.useState(0);
const [invert, setInvert] = React.useState(false);
const onChange = (event) => {
setAmount(event.target.value);
};
// reset 버튼
const reset = () => { setAmount(0) };
// filp 버튼
const filp = () => {
reset();
setInvert((current) => !current)
};
return (
<div>
<h3>KM 2 M</h3>
<div>
<label for="km">Km</label>
<input
id="km"
type="number"
value={invert ? (amount / 1000) : amount}
onChange={onChange}
disabled={invert}
/>
</div>
<div>
<label for="meter">meter</label>
<input
id="meter"
type="number"
value={invert ? amount : (amount * 1000)}
onChange={onChange}
disabled={!invert}
/>
</div>
<button onClick={reset}>reset</button>
<button onClick={filp}>filp</button>
</div>
);
};
</script>'react' 카테고리의 다른 글
| nomad code_react js로 영화앱 만들기_#4.1 (0) | 2022.11.11 |
|---|---|
| nomad code_react js로 영화앱 만들기_#4.0 (0) | 2022.11.11 |
| nomad code_react js로 영화앱 만들기_#3.5 ~ 3.8 (0) | 2022.11.09 |
| nomad code_react js로 영화앱 만들기_#3.0 ~ 3.4 (0) | 2022.10.06 |
| nomad code_react js로 영화앱 만들기_#2.3, #2.5, #2.6 (0) | 2022.10.05 |