반응형
SMALL
0. 코드 설명
각각 분과 시간 입력란이 있고,
하단에는 reset 버튼과 flip 버튼이 있어서
하단에 reset 버튼을 누르면 다시 입력할 수 있게 전부 지워지고,
flip 버튼을 누르면 reset과 마찬가지로 다시 입력할 수 있게 전부 지워지면서,
각각 분 입력란 또는 시간 입력란에 입력할 수 있게 switch 되도록 한다.
분을 입력하면 시간으로 계산해주고,
시간을 입력하면 분으로 계산해주는 프로그램 만들기.
1. JSX와 JavaScript의 차이점
JavaScript에서는 class를 통해서 css를 넣을 수 있고,
특정 label에 특정 쿼리의 아이디를 지정할 때 for을 사용할 수 있지만,
JSX에서는 class와 for을 사용할 수 없다.
JSX에서는 class 대신 className을 사용해야 하며, for 대신 htmlFor을 사용해야 한다.
2. React에서 form을 다루는 법
파라미터 값을 console에 넣으면 크롬 개발자 페이지에서 해당 이벤트에 어떤 것들이 있는지 나열이 된다.
입력한 값이 제대로 반영되는지 확인하고 싶다면, [parameter 명].target.value를 입력하면 확인할 수 있다.
const onChange = (event) => {
console.log(event.target.value);
}
3. 본문 (코드)
<!DOCTYPE html>
<html lang="en">
<body>
<div id="root"></div>
</body>
<script src="https://www.unpkg.com/react@16.8.4/umd/react.development.js"></script>
<script src="https://www.unpkg.com/react-dom@16.8.4/umd/react-dom.development.js"></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); //초기값은 지정하지 않아도 되고, ""나 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="Minutes"
type="number"
onChange={onChange}
disabled={flipped}
/>
</div>
<div>
<label htmlFor="hours">Hours</label>
<input
value={flipped ? amount : Math.round(amount / 60)}
id="hours"
placeholder="Hours"
type="number"
onChange={onChange}
disabled={!flipped}
/>
</div>
<button onClick={reset}>Reset</button>
<button onClick={onFlip}>Flip</button>
</div>
);
}
ReactDOM.render(<App />, root);
</script>
</html>반응형
LIST
'개발 > React' 카테고리의 다른 글
| [React, Typescript] 채팅 프론트엔드 구현 (1편) (0) | 2024.07.18 |
|---|---|
| [React] 프로젝트 초기 세팅 (Typescript, ESLint, Prettier, Tailwind CSS) (0) | 2024.07.11 |
| 3.4 State Functions (0) | 2023.06.10 |
| 3.0 Understanding State (0) | 2023.06.09 |
| [복습] 2.5 JSX (0) | 2023.06.04 |
