지난 번에 만든 시/분 계산기는 하나의 컴포넌트이다.
이런 부품을 여러개 만들어서 조합하여 페이지에 렌더링 할 수 있다.
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
<div id="root"></div>
</body>
<script
src="https://unpkg.com/react@17/umd/react.development.js"
crossorigin
></script>
<script
src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
crossorigin
></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);
const onInvert = () => {
reset();
setInverted((current) => !current);
};
return (
<div>
<h3>Minutes 2 Hours</h3>
<div>
<label htmlFor='minutes'>Minutes</label>
<input
value={inverted ? amount * 60 : amount}
id='minutes'
placeholder='mins'
type='number'
onChange={onChange}
disabled={inverted}
/>
</div>
<div>
<label htmlFor='hours'>Hours</label>
<input
value={inverted ? amount : Math.round(amount / 60)}
id='hours'
placeholder='hrs'
type='number'
onChange={onChange}
disabled={!inverted}
/>
</div>
<button onClick={reset}>Reset</button>
<button onClick={onInvert}>
{inverted ? "toHours" : "toMinutes"}
</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 onInvert = () => {
reset();
setInverted((current) => !current);
};
return (
<div>
<h3>KM 2 M</h3>
<div>
<label htmlFor='kilometers'>Kilometers</label>
<input
value={inverted ? amount * 1.6 : amount}
id='kms'
placeholder='kms'
type='number'
onChange={onChange}
disabled={inverted}
></input>
</div>
<div>
<label htmlFor='miles'>Miles</label>
<input
value={inverted ? amount : amount * (1 / 1.6)}
id='miles'
placeholder='miels'
type='number'
onChange={onChange}
disabled={!inverted}
></input>
</div>
<button onClick={reset}>Reset</button>
<button onClick={onInvert}>
{inverted ? "toMiles" : "toKimlometers"}
</button>
</div>
);
}
function App() {
const [index, setIndex] = React.useState("xx");
const onSelect = (event) => {
setIndex(event.target.value);
};
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 === "0" ? <MinutesToHours /> : null}
{index === "1" ? <KmToMiles /> : null}
</div>
);
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);
</script>
</html>MinutesToHours 와 KmToMiles라는 컴포넌트를 만들고 state를 활용하여 state에 따라 렌더링을 다르게 한다.
select와 option 태그를 활용하여 option value에 맞게 컴포넌트를 렌더링 해준다.
'취업 준비 > React' 카테고리의 다른 글
| 7. create-react-app (0) | 2022.03.17 |
|---|---|
| 6. Props (0) | 2022.03.08 |
| 4. State 예제 - 시/분 변환기 (0) | 2022.03.05 |
| 3. State와 reRendering (0) | 2022.03.04 |
| 2. JSX 문법 (0) | 2022.03.04 |
