[TIL]React useState단위변환

오늘 공부한것 & 기억하고 싶은 내용

useState

useState를 사용하여 시간변환 코드를 작성했다.

const [amount, setAmount] = useState();
const [flip, setfilp] = useState(flase);
const onChange (e) => {
	setAmount(e.target.value); //정확한  
  value값을 가져오기 위해 사용
}
const reset () => setAmount(0);
const onFlip () => {
  reset();
  setFlip((cur) => !cur);
}

return(
	<div>
  		<h1>Converter</h1>
  		<div>
  			<label htmlFor="minutes">Minutes</label>
  			<input
  			value={flip ? amount*60 : amount}
			id="minutes"
			disabled={flip}
			onChange={onChange}
			/>
  		</div>
		<div>
  			<label htmlFor="hours">Hours</label>
  			<input
  			value={flip ? amount : Math.round(amount/60)}
			id="hours"
			disabled={!flip}
			onChange={onChange}
			/>
  		</div>
		<button onClick={reset}>Reset</button>
		<button onClick={onFlip}>Flip</button>
  	</div>
)

배운점 & 느낀점

amount라는 state하나로 minutes에서 hours로 hours에서 minutes으로 시간 변환을 쉽게 할 수 있는게 리액트의 장점인거 같다.
바닐라JS에서 만들었으면 코드가 복잡했을거 같은데 useState만을 써서 만드니 코드가 한결 간결하고 가독성이 높다.