머 사용자들의 인풋값을 통해 업데이트되고 어쩌구 하는 예제 코드를 공부해보자.
state를 활용하여 분 <-> 시간 단위 변경하기
- 분 -> 시간으로 단위 변경
- Invert 버튼 클릭 시 시간 -> 분으로 단위변경
위와 같은 동작을 하는 예제 코드를 본격적으로 확인해보자.
1. 분을 시간 단위로 바꾸기
중요!
분을 시간 단위로 바꾸면서 사용자가 다른 값을 입력할때마다 input value를 업데이트 해야한다.
function App()
{
const [amount, setAmount] = React.useState(0)
const onChange = (event) => {
setAmount(event.target.value)
}
const reset = () => setAmount(0)
}
return (
<div>
<h1 className="h1">Super Converter</h1>
<div>
<label htmlFor="Minutes">Minutes</label>
<input
value={amount}
id="minutes"
placehoder="Minutes"
type="nuimber"
onChange={onChange}
/>
<h4>You want to conver : {amount}</h4>
<label htmlFor="Hours">Hours</label>
<input
value={Math.round(amount / 60)}
id="hours"
placehoder="Hours"
type="number"
/>
</div>
</div>
)-
const [amount, setAmount] = React.useState(0)
React.useState(0) -> default : 0
amount -> first element로 현재 값을 말한다.
setAmount -> 값을 변경해주는 함수 -
input value={amount}를 통해 데이터를 얻을 수 있다.
JXS는 HTML과 같은 기능을 하지만 몇 가지 지원되지 않는 기능이 있다.
예를 들어 class, for와 같은 자바스크립트에서 선점하고 있는 함수이름을 사용할 경우 에러가 난다.
따라서 JXS에서 사용할 수 있는 태그로 대체하여 사용해야한다.
HTML class -> JXS className
HTML label for -> JXS htmlFor
const onChange = (event) => {console.log(event)}
위의 코드에서처럼 event를 출력하면 리액트에서는 가짜 event를 발생시킨다.
따라서 value를 얻기위해선 원래의 event(native event)에서 찾아야한다.
-> console.log(event.target.value)
이런 방식을 사용하면 document.get어쩌구를 해줄 필요가 없어 좋다.
2. 시간을 분 단위로 바꾸기 (Invert function 만들기)
분 <-> 시간 단위로 변경시에 invert버튼을 통해 스위칭되고 input이 활성화/비활성화되는 기능도 함께 추가하였다.
function App() {
const [amount, setAmount] = React.useState(0)
const [inverted, setInverted] = React.useState(false)
const onChange = (event) => {
setAmount(event.target.value)
}
const reset = () => setAmount(0)
const onInvert = () => {
reset()
setInverted((current) => !current)
}
return (
<div>
<h1 className="h1">Super Converter</h1>
<div>
<label html For="Minutes">Minutes</label>
<input
value={inverted ? amount * 60 : amount}
id="minutes"
placehoder="Minutes"
type="number"
onChange={onChange}
disabled={inverted}
/>
</div>
<div>
<label htmlFor="Hours">Hours</label>
<input
value={inverted ? amount : Math.round(amount / 60)}
id="hours"
placehoder="Hours"
type="number"
disabled={!inverted}
onChange={onChange}
/>
</div>
<button onClick={reset}>Reset</button>
<button onClick={onInvert}>{inverted ? "Turn back" : "Invert"}</button>
</div>
)
}-
const onInvert = () => {
setInverted((current) => !current)
}Invert 상태를 확인하여 true -> false, false -> true로 반환하는 함수
현재 값을 받아서 그 반대의 값을 내놓는다.
- input disabled={inverted}
input disabled={!inverted}
input disabled={true} 입력불가 상태
input disabled={false} 입력가능 상태
따라서 state값으로 input을 enabled 할지, disabled 할지 결정 할 수 있다.
- hours input의 change event 리스닝하기
onChange={onChange}를 그대로 가져오게 되면 input hours의 값과 minutes 값에 혼동이 온다.
따라서 Math.round(minute / 60) 부분을 삼항 연산자로 변경해주어야 한다.
value={inverted ? amount * 60 : amount}
value={inverted ? amount : Math.round(amount / 60)}
inverted일 경우 state에 있는 값을 그대로 보여주고 아닐경우 연산해서 보여준다.
니꼬쌤 강의는 영상 시간으로만 따지면 그리 긴 편이 아닌거같은데 강의 들으면서 정리하고 후에 블로그로 정리하는 시간까지 하면 너무 오래걸린다.
하지만 머릿속에는 오래 남는편인듯... 부지런히 열심히 하자자자잣
