HTML에서 정보를 받아오기 위해서는
form과 input태그를 사용해야 했다.
React에서도 기본적인 개념은 이용하지만,
훨씬 간편한 방법으로 사용자가 제공한 정보를 가져올 수 있다.
다음 코드의 흐름을 살펴보자
<!DOCTYPE html>
<html lang="en">
<body>
<div id="root"></div>
</body>
<!-- How to import React(engine) -->
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<!-- How to import React-dom(put elements into HTML) -->
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<!-- How to make browser read JSX syntax (using babel)-->
<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();
const onChange = (event) => {
setMinutes(event.target.value)
};
return (
<div>
<h1 className="hi">Super Converter</h1>
<label htmlFor="minutes">Minutes</label>
<input
value={minutes}
id="minutes"
placeholder="Minutes"
type="number"
onChange={onChange}
/>
<h4>You want to convert {minutes}</h4>
<label HtmlFor="hours">Hours</label>
<input id="hours" placeholder="Hours" type="number" />
</div>
)
}
// initial render
ReactDOM.render(<App />, root);
</script>
</html>애플리케이션이 시작됨과 동시의 initial render가 실행된다.
그리고 input박스를 통해 user에게 정보를 요구한다.
user가 정보를 넣는 순간 ( == onChange) onChange함수가 실행되고,
이 함수는 바뀐 순간의 상황 (여기서는 임의로 event라고 정의)의 target.value즉,
사용자가 넣은 숫자를 minutes에 넣어 rerendering시킨다.
이에 따라 UI는 업데이트되고 h4태그 내에 있는 minutes는 사용자의 입력값이 변할 때마다 업데이트된다.
'FrontEnd > React' 카테고리의 다른 글
| [ReactJS] prop (0) | 2023.01.09 |
|---|---|
| [ReactJS] prop에 대한 이해 (0) | 2023.01.08 |
| [ReactJS] React.useState() (0) | 2023.01.07 |
| [ReactJS] render, rerender (0) | 2023.01.05 |
| [ReactJS] JSX 문법 (0) | 2023.01.05 |
