<!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.0.2/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.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);
const onChange = (event) => {
setAmount(event.target.value); // 데이터를 업데이트
};
const reset = () => setAmount(0);
const onFlip = () => {
reset();
setFlipped((current) => !current);
};
return (
<div>
<div>
<label htmlFor="minutes">Minutes</label>
<input
value={flipped ? amount * 60 : amount}
id="minutes"
placeholder="Minutes"
type="number"
onChange={onChange}
disabled={flipped}
/>
</div>
<div>
<label htmlFor="hours">Hours</label>
<input
id="hours"
value={flipped ? amount : Math.round(amount / 60)}
placeholder="Hours"
type="number"
onChange={onChange}
disabled={!flipped}
/>
</div>
<button onClick={reset}>Reset</button>
<button onClick={onFlip}>{flipped ? "Turn back" : "Invert"}</button>
</div>
);
}
function KmToMiles() {
return <h3>KM 2 M</h3>;
}
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 unites</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>
<!--
ReactJS는 어플리케이션을 interactive 하게 만들어주는 library
react-dom은 library, 또는 패키지. 모든 react element들을 html body에 둘 수 있도록 해준다.
-->
학기 중에 못했던 리액트를 다시 복습하기 위해서 노마드코더 리액트 강의를 들었다.
새로 2021 버전으로 업데이트 됐는데, 훨씬 이해가 잘되고 접근하기 쉬운 느낌이었다.
위의 코드는 단위를 변환하는 간단한 코드로, state를 연습해보기 좋았다.
반응형
'FRONT > REACT' 카테고리의 다른 글
| [React] Effect Hook- Clean up 함수 (0) | 2022.01.07 |
|---|---|
| [React] UseEffect 사용하기(노마드코더 영화 웹서비스 만들기) (0) | 2022.01.06 |
| [리액트] 도서 검색 사이트 만들기 (2) | 2021.09.05 |
| [React] 노마드코더 영화 웹 서비스 만들기(4) - github에 배포하기 (0) | 2021.08.25 |
| [React] 노마드코더 영화 웹 서비스 만들기(3) - Rendering (0) | 2021.08.25 |