1. State를 하나 쓰는 예제 (분 -> 시 변환기)
<!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">
const root = document.getElementById("root");
function App() {
const [minutes, setMinutes] = React.useState(0);
const onChange = (event) => {
setMinutes(event.target.value);
};
const reset = () => setMinutes(0);
return (
<div>
<h1 className='hi'>Super Converter</h1>
<div>
<label htmlFor='minutes'>Minutes</label>
<input
value={minutes}
id='minutes'
placeholder='mins'
type='number'
onChange={onChange}
/>
</div>
<div>
<label htmlFor='hours'>Hours</label>
<input
value={Math.round(minutes / 60)}
id='hours'
placeholder='hrs'
type='number'
disabled
/>
</div>
<button onClick={reset}>Reset</button>
</div>
);
}
ReactDOM.render(<App />, root);
</script>
</html>분을 입력하면 반올림해서 시간으로 바꿔주는 예제이다. event.target.value로 input 안에 넣는 값을 가져올 수 있다.
2. State를 두 개 쓰는 예제 (Flip 버튼을 클릭하면 입력칸 활성화/비활성화)
<!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">
const root = document.getElementById("root");
function App() {
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>
<h1 className='hi'>Super Converter</h1>
<div>
<label htmlFor='minutes'>Minutes</label>
<input
value={flipped ? amount * 60 : amount}
id='minutes'
placeholder='mins'
type='number'
onChange={onChange}
disabled={flipped}
/>
</div>
<div>
<label htmlFor='hours'>Hours</label>
<input
value={flipped ? amount : Math.round(amount / 60)}
id='hours'
placeholder='hrs'
type='number'
onChange={onChange}
disabled={!flipped}
/>
</div>
<button onClick={reset}>Reset</button>
<button onClick={onFlip}>Flip</button>
</div>
);
}
ReactDOM.render(<App />, root);
</script>
</html>'취업 준비 > React' 카테고리의 다른 글
| 6. Props (0) | 2022.03.08 |
|---|---|
| 5. 컴포넌트 조합하기 (0) | 2022.03.08 |
| 3. State와 reRendering (0) | 2022.03.04 |
| 2. JSX 문법 (0) | 2022.03.04 |
| 1. JS vs React (0) | 2022.03.04 |
