<!DOCTYPE html>
<head>
</head>
<body>
<span>total click : 0</span>
<button id="btn">click me!</button>
</body>
<script>
let counter = 0;
const button = document.getElementById('btn');
const count = document.querySelector('span')
function clickHandler(){
counter += 1;
count.innerText = `total click : ${counter}`;
}
button.addEventListener('click', clickHandler)
</script>
</html>function Counter(){
const [count, setCount] = React.useState(0)
const onClick = () => {
setCount((current) => current + 1)
}
return(
<div>
<span> Total click : {count} </span>
<button onClick={onClick}>Click me!</button>
</div>
)
}
Vanilla JS를 통해 코드를 구성한 코드와, 리액트를 이용해 구성한 코드를 통해 리액트의 강점을 알아보는 시간을 가졌다.
리액트 코드는 생략된 부분이 많지만(렌더링하는 부분이 생략돼있다), useState와 같은 훅이나 라이브러리의 특성상
편리한 기능이 많았다.
코드를 작성하는 방식에서, JSX 형식으로 코드를 작성하여 JS안에서 마치 HTML을 작성하는 듯 편하게 코드를 작성할 수 있었다.
(물론 이런 부분은 브라우저가 해석하는데 한계가 있어 Babel이라는 도구를 이용하여 자동으로 변환되도록 처리한 단계가 있다.)
바벨 찾고하면 좋은 글 ! 긁어 왔다..
배워서 나주는 Babel
배워서 나주는 시리즈 그 두번째 이번에는 babel에 대해서 알아보자. 1)BABEL이란? > Babel is a JavaScript compiler. -공식사이트- 바벨은 자바스크립트 컴파일러다. 쉽게 생각하면 자바스크립트를 자바스
velog.io
이 외에도, 훅을 이용하여 (아마 DOM과 Virtual DOM의 비교를 통한) 변경된 부분만 감지하여 리렌더링을 해주는 부분도
효율적이면서 편하다고 생각했다.
import React from 'react';
import ReactDOM from 'react-dom/client';
import reportWebVitals from './reportWebVitals';
function App(){
const [index, setIndex] = React.useState();
const onSelect = (event) => {
setIndex(event.target.value)
}
return(
<div>
<h1>Super Converter</h1>
<select value={index} onChange={onSelect}>
<option value="X">Select your units</option>
<option value="0">Minutes & Hours</option>
<option value="1">Km & Miles</option>
<option value="2">Counter</option>
</select>
{index === "0" ? <MinutesToHours /> : null}
{index === "1" ? <KmtoMiles /> : null}
{index === "2" ? <Counter /> : null}
</div>
);
}
function KmtoMiles(){
const [amounts, setAmounts] = React.useState(0);
const [inverted, setInverted] = React.useState(false);
const onChange = (event) =>{
setAmounts(event.target.value);
}
const onReset = () => {setAmounts((current) => !current)}
const onFlip = () => {setInverted((current) => !current)}
return(
<div>
<h2>Kilometer to Mile</h2>
<div>
<label htmlFor="amounts">Kilometer</label>
<input
value={inverted ? amounts * 1.609: amounts}
id="amounts"
placeholder="Kilometer"
type="number"
onChange={onChange}
disabled={inverted}/>
{/* onChange 함수를 이용하여 setAmounts 값을 배정하지 않으면, default값에서 값이 변경되지 않는다. */}
</div>
<div>
<label htmlFor="hours">Miles</label>
<input
value={inverted ? amounts : Math.round(amounts/1.609)}
id="amounts"
placeholder="Miles"
type="number"
onChange={onChange}
disabled={!inverted}/>
</div>
<div>
<button
onClick={onReset}>RESET</button>
<button
onClick={onFlip}>{inverted ? "TURN BACK" : "INVERT"}</button>
</div>
</div>
)
}
function MinutesToHours(){
const [amounts, setAmounts] = React.useState(0);
const [inverted, setInverted] = React.useState(false);
const onChange = (event) => {
setAmounts(event.target.value);
}
const onReset = () => { setAmounts(0); }
const onFlip = () =>{
setInverted((current) => !current );
onReset();
}
return(
<div>
<h2> Minutes to Hours </h2>
<div>
<label htmlFor="amounts">Minute</label>
<input
value={inverted ? amounts * 60 : amounts}
id="amounts"
placeholder="Minute"
type="number"
onChange={onChange}
disabled={inverted}/>
{/* onChange 함수를 이용하여 setAmounts 값을 배정하지 않으면, default값에서 값이 변경되지 않는다. */}
</div>
<div>
<label htmlFor="hours">Hours</label>
<input
value={inverted ? amounts : Math.floor(amounts/60)}
id="hours"
placeholder="Hours"
type="number"
onChange={onChange}
disabled={!inverted}/>
</div>
<div>
<button
onClick={onReset}>RESET</button>
<button
onClick={onFlip}>{inverted ? "TURN BACK" : "INVERT"}</button>
</div>
</div>
)
}
function Counter(){
const [count, setCount] = React.useState(0)
const onClick = () => {
setCount((current) => current + 1)
}
return(
<div>
<span> Total click : {count} </span>
<button onClick={onClick}>Click me!</button>
</div>
)
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />)
reportWebVitals();강의를 통해 useState, 값 전달등을 연습할 수 있었고 값을 주고 받으면서 값을 '변경'하고
이를 감지하여 렌더링하는 것을 익힐 수 있었다.
앞으로 웹페이지를 만들 때 값을 어떻게 주고받는지, 또 JS의 기능들을 어떻게 활용할 지에 대해
알고 싶었는데, 이 강의를 통해 공부할 수 있어 매우 기쁘다!
'Front-end > React.Js' 카테고리의 다른 글
| [nomad coder] 리액트 기초 5 - API(코인 시세표) (0) | 2022.11.25 |
|---|---|
| [nomad coder] 리액트 기초 4 - todo list 만들기 (0) | 2022.11.25 |
| [nomad coder] 리액트 기초 3 - 번외(Cleanup Function) (0) | 2022.11.24 |
| [nomad coder] 리액트 기초 3 (0) | 2022.11.24 |
| [nomad coder] 리액트 기초 2 (0) | 2022.11.24 |
댓글