$$config title: [React] Practice and Recap keywords: - select - label - toggle function $$ # Minutes To Hours method >코드 설명 - useState method를 이용하여 amount 의 값을 리렌더링 - reset 버튼을 눌를시 setFlipped((current) => !current)로 현재 가지고 있는 true/false 의 값을 toggle - input 변수의 값이 변화를 가질 경우 onChange의 이벤트가 발생하여 useState 호출하여 변수의 값을 저장 ```html function MinutesToHours(){ const [amount, setAmount] = React.useState(0); const [flipped, setFlipped] = React.useState(true); const reset = () => setAmount(0); const onFlip = () => { reset(); setFlipped((current) => !current); } const onChange = (event) => { setAmount(event.target.value); }; return (

Minutes

Hours

); } ``` # Kilometer To Miles method ```html function KmToMiles(){ const [length, setLength] = React.useState(0); const [toggle, setToggle] = React.useState(false); const reset = () => setLength(0); const onToggle = () => { reset(); setToggle((current) => !current); } console.log(toggle); const onChange = (event) => { setLength(event.target.value); }; return (

kilometer

Mile

) } ``` # all code > 코드 설명 - App function 에서 index의 초기 값을 xx 로 지정 - select event가 발생하였을때 index의 값이 변경 - index의 값이 일치할 경우 method를 호출 ```html

```