리액트를 이용하여 클릭버튼과, 분을 시간으로 바꿔주고, 반대로 시간을 분으로 바꿔주는 것을 만들어 보았다.
먼저 자바스크립트로 이것들을 할려면 CreateElement를 이용하여 태그를 만들어주고, 이벤트 리스너, 해당 이벤트리스너에 함수 등등
여러가지를 만들어야 하는데, 리액트는 이러한 것들을 단축시키는 아주 좋은 라이브러리이다.
리액트를 시작하면서 느낀점은 리액트도 결국엔 자바스크립트 라이브러리 이기때문에 자바스크립트의 숙련도가 매우 중요 한 것 같다.
리액트를 시작하기 위해서 script로 react, reactdom을 사용할수 있게 불러왔고, jsx를 사용하기 위해서 babel또한 불러왔다.
바벨을 사용할려면 작성할려는 스크립트에 type="text/babel"를 입력해줘야지 잘 작동 된다.
먼저 함수를 사용하여 함수안에 html태그들을 jsx식으로 만들어주었다.
function App(){
const [click, setClick] = React.useState(0);
const onclick = () => {
setClick(click + 1)
}
return(
<div>
<h3>Total Click: {click}</h3>
<button onClick={onclick}>Click me!</button>
</div>
);
}
버튼에 onclick이라는 이벤트 리스너를 넣어줬는데 jsx에서 사용할땐 on을 붙어서 이벤트를 불러와줘야한다.
Click me라는 버튼을 클릭 할 때 발생하는 이벤트는
h3 total click: 에 숫자가 올라가는것이다.
여기서 자바 스크립트 였다면 이렇게 했을것이다.
const title = document.querySelector("#title");
const btn = document.querySelector("button");
let counter = 0;
const btnclick = () => {
counter = counter + 1;
title.innerText = `Total click: ${counter}`;
}
btn.addEventListener("click", btnclick)
변수를 만들어주고 클릭을하면 해당 변수에 +1를 해준다음에 innerText에 추가해주는 방식으로
하지만 이렇게 변수로 만들어주면 react에서는 문제가 하나 발생하는데 rerendering을 해줘야하느것이다.
이렇게 새로운 이벤트들이 있을때 마다 rerendering을 해줘야해서 불편한데 그래서 필요한것이 바로
React.useState이다 useState는 기존의 데이터와 변경되는 데이터가 존재하는데 데이터가 변경 될 때 마다 자동으로 rerendering이 되어서 좋다.
그래서 다시 react코드를 확인해보면,
function App(){
const [click, setClick] = React.useState(0);
const onclick = () => {
setClick(click + 1)
}
return(
<div>
<h3>Total Click: {click}</h3>
<button onClick={onclick}>Click me!</button>
</div>
);
}
click이 기본값, setClick이 변경되는 값이다 변경되는 값에는 함수를 넣을수있다.
그래서 클릭을 할때마다 변경되는 값에 현재값의 + 1이 적용 되는 것이다.
다음으로 convert코드를 만들어보았는데,
먼저 jsx로 title과 input, input을 연결해주는 label, reset, flip을 만들어주었다
return(
<div>
<h3>super convert</h3>
{/*minutes*/}
<div>
<label htmlFor="minutes">Minutes</label>
<input
value={flipped ? amount * 60 : amount}
id="minutes"
type="number"
placeholder="please write Minutes"
onChange={onchange}
disabled={flipped}/>
</div>
{/*hours*/}
<div>
<label htmlFor="hours">Hours</label>
<input
value={flipped ? amount: Math.round(amount / 60)}
id="hours"
type="number"
placeholder="please write Hours"
onChange={onchange}
disabled={!flipped}/>
</div>
{/*reset*/}
<button onClick={reset}>Reset</button>
{/*flip*/}
<button onClick={flip}>Flipped</button>
</div>
);
아까랑 방법은 매우 유사하다 입력값에 변수를 넣어주고 해당 변수가 hour부분에서는 miutes의 / 60 반대로 minutes부분에서는, hour * 60
react.useState를 이용하여 minutes, hour값을 설정해주었고 초기 값은 undefined이다.
또한 disabled를 사용하여 하나를 작성하고 있을땐 다른 하나는 작성못하게 하였고, 해당 disabled 또한 true, false로 useState를 사용하였다.
value값을보면 fliiped ? 옆에 ?가있는데 이것은 삼항연산자로서
조건 ? a : b 조건이 참이면 a를 거짓이면 b를 출력한다.
삼항 연산자를 이용하여 disable일때마다 다른것을 나타내도록 설정하였다 그렇다면 React.useState에 무엇을 설정 하였는지 보자면,
const [amount, setAmount] = React.useState();
const [flipped, setFlipped] = React.useState(false);
const onchange = (event) => {
setAmount(event.target.value);
}
const reset = () => {setAmount(0)}
const flip = () => {
setFlipped((current) => !current)
reset();}
amount, setAmount, flipped, setFlipped를 사용하였다 왠만해서 useState를 사용하는것은 값이 변하는 것들에 사용한다.
아래 함수는 reset, flip의 버튼 이벤트 리스너 함수이다. 총 코드를 보자면.
<!DOCTYPE html>
<html lang="en">
<body>
<div id="root"></div>
</body>
<script type="text/babel">
function App() {
const [amount, setAmount] = React.useState();
const [flipped, setFlipped] = React.useState(false);
const onchange = (event) => {
setAmount(event.target.value);
}
const reset = () => {setAmount(0)}
const flip = () => {
setFlipped((current) => !current)
reset();}
return(
<div>
<h3>super convert</h3>
{/*minutes*/}
<div>
<label htmlFor="minutes">Minutes</label>
<input
value={flipped ? amount * 60 : amount}
id="minutes"
type="number"
placeholder="please write Minutes"
onChange={onchange}
disabled={flipped}/>
</div>
{/*hours*/}
<div>
<label htmlFor="hours">Hours</label>
<input
value={flipped ? amount: Math.round(amount / 60)}
id="hours"
type="number"
placeholder="please write Hours"
onChange={onchange}
disabled={!flipped}/>
</div>
{/*reset*/}
<button onClick={reset}>Reset</button>
{/*flip*/}
<button onClick={flip}>Flipped</button>
</div>
);
}
ReactDOM.render(<App/>, root);
</script>
</html>
자바스크립트를 다시 공부하고 리액트에 들어가니깐 더 이해가 쉽고 왜 이벤트 리스너를 이렇게 사용하고 useState는 어떨때사용하는지
잘 알게 된 것 같다 다음 리액트 공부가 기대된다.