728x90
반응형
1. React.useState() : const [] 의 Array 내부의 프로퍼티는 [Default, modifier]로 나눌수 있다.
2. script src =" unpkg... " 링크를 통해 React JSX 라이브러리 사용 가능
3. disabled 값은 true 일때 활성화, false일때 비활성화 . onClick={onFlip} 을 통해 위 값을 버튼을 통해 Flip 하는 방식)
4. setFlipped((current) => !current); 코드는 setFlipped(!flipped)에서 개선된 코드이다.
5. input의 value={flipped} 에서 value값 flipped는 Default 값인 False 가 onFlip function을 통해 그 값이 바뀐다.
6. condition ? true : false 3항 연산자는 condition 자체에 True, False 값을 써도 무관하다.
<!DOCTYPE html>
<html>
<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 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>Super Converter</h1>
<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 for="hours">Hours</label>
<input
value={flipped ? amount : Math.round(amount / 60)}
id="hours"
placeholder="Hours"
type="number"
disabled={!flipped}
onChange={onChange}
/>
</div>
<button onClick={reset}>Reset</button>
<button onClick={onFlip}>Flip</button>
</div>
);
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);
</script>
</html>
728x90
'개발자 페이지 > React JS, Next JS' 카테고리의 다른 글
| Typescript / interface 기능 (0) | 2022.12.18 |
|---|---|
| React JS / VScode for React, Prettier 세팅하기(Javascript, Vanila JS, React) (0) | 2022.12.01 |
| React JS / to do list_Practice (0) | 2022.12.01 |
| React JS / useEffect() 다양한 표기 방법 (0) | 2022.11.30 |
| React JS / Render 방식 (2) | 2022.11.28 |
