2022. 9. 13. 16:15ㆍReact/ReactJS로 영화 웹 서비스 만들기
이번에는 unit conversion(단위변환) 앱을 만들어보자!
분 -> 시간, 시간 -> 분, km -> mile, kg -> pound
우선은 아래와 같이 작성하였는데,
<!DOCTYPE html>
<html lang="en">
<body>
<div id="root"></div>
</body>
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
const root = document.getElementById("root");
function App() {
return (
<div>
<h1>Super Converter</h1>
<label for="minutes">Minutes</label>
<input id="minutes" placeholder="Minutes" type="number" />
<label for="hours">Hours</label>
<input id="hours" placeholder="Hours" type="number" />
</div>
)
}
ReactDOM.render(<App />, root);
</script>
</html>
JSX에서는 다르게 표현해야하기 때문에!!!!
이는 에러가 나지 않는다.왜냐하면 production.min.js을 사용하고 있기 때문에!
우리가 이를 development로 바꿔준다면 아래와 같이 유효하지 않은 DOM property 'for'이 있다고 Warning이 나오게 된다.
for은 JavaScript용어로 class와 같다고 생각하면 된다.
h1에 class를 hi로 지정해줘도 똑같은 에러가 난다.
그래서 우리는 JSX를 사용하고 있고
JSX는 HTML과 비슷하지만 다른점 몇가지가 있는데
- class를 사용하면 안된다. >> className 사용
- for를 사용하면 안된다. >> htmlFor 사용
그럼 다음의 코드를 아래와 같이 변경한다면
모든 것들이 정상적인 HTML로 변환되고 있음을 알 수 있다.
자 그럼 STATE를 만들어보자.
이제 value를 input에 줘보자.
그리고 값을 바꿔주는 onChange라는 함수도 만들어보자.
이것이 JavaScript인데!
React JS의 최고의 장점 중 하나가 일반적인 JavaScript랑 같다는 것인데
다음과 같이 이벤트처리를 해주면,
합성이벤트(Synthetic Event)를 출력하는 것을 확인할 수 있다.
이는 React JS가 가짜 event를 발생시키는데, 얘네는 event를 최적화 시킨다.
원래의 event(Native event)를 얻고 싶다면 아래의 Event를 보면 되는데, 이는 우리가 event에 접근할 수 있음을 나타낸다.
여기에서 중요한건 타겟(바뀐 input)을 볼 수 있다는 것이다.
여기에서 우리는 value를 찾을 수 있다.
그래서 우리는 event.target.value 로 출력하면 되는 것이다.
그럼 다음과 같이 출력된다.
이것이 React에서 Form을 다루는 법이다.
minutes를 사용하고 useMinutes를 이용하여 데이터를 업데이트 해보자.
그럼 다음과 같이 변한다.
이로인해 입력한 input의 value 바탕으로 compoenent를 업데이트하는 것을 볼 수 있다.
전체 코드
<!DOCTYPE html>
<html lang="en">
<body>
<div id="root"></div>
</body>
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.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 [minutes, setMinutes] = React.useState();
const onChange = (event) => {
setMinutes(event.target.value);
}
return (
<div>
<h1>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>
)
}
ReactDOM.render(<App />, root);
</script>
</html>'React > ReactJS로 영화 웹 서비스 만들기' 카테고리의 다른 글
| 3.7 State Practice part Two (0) | 2022.09.14 |
|---|---|
| 3.6 State Practice part One (0) | 2022.09.13 |
| 3.4 State Functions (0) | 2022.09.07 |
| 3.3 Recap (0) | 2022.09.07 |
| 3.2 setState part Two (0) | 2022.09.07 |