반응형
unit conversion app 만들기
[HTML] 에서는
label과 input 을 연결시키기 위해서
input의 id 값과 label의 for 값을 일치시킨다
그러나 [REACT] 에서는 이렇게 하지 않는다.
JSX에서는 다르게 표현해야 한다.
우리는 HTML을 사용하는 것이 아니라 HTML과 비슷한 JSX를 사용하는 것이다
for는 자바스크립트 용어이기 때문에 사용할 수 없다.
jsx는 html과 비슷하지만 다른 몇 가지가 있다
1) class를 사용하면 안된다 > className 으로 사용
2) for를 사용하면 안된다 > htmlfor 사용
minutes에 필요한
useState는 array를 제공하고 첫번째 element가 현재 값이 된다.
setState 함수의 특징
데이터 값을 변경해주는 것과 동시 화면도 변경한다.
production - > development 로 변경하는데
production은 배포 모드, development는 개발 모드를 의미합니다.
개발모드는 니코쌤이 보여준 것 처럼 버그로 이어질 수 있는 요소들을 미리 경고하는 검증 코드가 포함되어 있습니다.
코드
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/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() {
// min > hour
const [minutes, setMinutes] = React.useState();
const onChange = (event) => {
setMinutes(event.target.value);
}
return (
<div>
<h1>Super Converter</h1>
<label htmlFor="minutes">Minutes</label>
<input
id="minutes"
value={minutes}
placeholder="Minutes"
type="number"
onChange={onChange}
/>
<h4>{minutes}</h4>
<br />
<label htmlFor="hours">Hours</label>
<input id="hours" placeholder="Hours" type="number" />
</div>
);
}
ReactDOM.render(<App />, root);
</script>
</html>반응형
'온라인 강의 > ReactJS로 영화 웹 서비스 만들기 [Nomad]' 카테고리의 다른 글
| #3.7 State Practice part Two (0) | 2023.05.22 |
|---|---|
| #3.6 State Practice part One (0) | 2023.05.22 |
| #3.4 State Functions (0) | 2023.05.20 |
| #3.3 Recap (0) | 2023.05.20 |
| #3.2 setState part Two (0) | 2023.05.20 |