[ReactJS] Props 실습 _영화 웹 서비스 만들기

시 분 변환기

 

function MinutesToHours() {
  const [amount, setAmount] = React.useState();
  const [inverted, setInverted] = React.useState();

  const onChange = (event) => {
    setAmount(event.target.value);
  }

  const reset = () => setAmount(0);
  const onInvert = () => { 
    reset();
    setInverted((current) => !current);
  }

  return (
    <div>
      <label htmlFor="hours">Hours</label>
      <input
        value={inverted ? amount : Math.round(amount / 60)}
        id="hours"
        placeholder='Hours'
        type="number"
        disabled={!inverted}
        onChange={onChange}
       />
    <button onClick={reset}>Reset</button>
    <button onClick={onInvert}>{inverted ? "Turn back" : "Invert"}</button>
    </div>
  )
}
function KmToMiles() {
  return(
    <h3>KM 2 M</h3>
    )
}

function App() {
  const [index, setIndex] = React.useState("0");
  const onSelected = (event) => {
    setIndex(event.target.value);
  }
  return(
    <div>
      <h1>Super Converter</h1>
      <select onChange={onSelected}>
        <option value="0">Minutes & Hours</option>
        <option value="1">Km & Miles</option>
      </select>
      {index === "0" ? <MinutesToHours /> : null} // {} 안에는 JS를 작성할 수 있음
      {index === "1" ? <KmToMiles /> : null}
    </div>
  )
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);