select 메뉴를 추가하여 리스닝 해 주기

1. 컴포넌트 추가하기

function MinutsToHours() {
      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>
          <div>
            <label htmlFor="minutes"> Minutes </label>
            <input
              value={inverted ? amount * 60 : amount}
              id="minutes"
              placeholder="Minutes"
              type="number"
              onChange={onchange}
              disabled={inverted}
            />
          </div>
          <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>
        </div>
      );
    }
    function KmToMiles() {
      return <h3>KM 2 M</h3>;
    }
    function App() {
      const [index, setIndex] = React.useState(0);

      return (
        <div>
          <h1>Super Converter</h1>
          <MinutsToHours />
          <KmToMiles />
        </div>
      );
    }

 

2. select 추가하기

    function App() {
      const [index, setIndex] = React.useState(0);

      return (
        <div>
          <h1>Super Converter</h1>
          <select>
            <option> Minutes & Hours </option>
            <option> KM & Miles </option>
          </select>
        </div>
      );
    }

 

3. option 에 value 주고 변화를 리스닝 해주기

속성으로 value를 가질 수 있으면 onChange  속성을 붙일 수 있다.
즉 select , option에도 붙일 수 있다.

            <option value="0"> Minutes & Hours </option>
            <option value="1"> KM & Miles </option>

 

    function App() {
      const [index, setIndex] = React.useState(0);
      const onSelect = (event) => {
        console.log(event);
      };
      return (
        <div>
          <h1>Super Converter</h1>
          <select onChange={onSelect}>
            <option value="0"> Minutes & Hours </option>
            <option value="1"> KM & Miles </option>
          </select>
        </div>
      );
    }

 

 

 

4. JavaScript 식으로 수정하기

...
    function App() {
      const [index, setIndex] = React.useState(0);
      const onSelect = (event) => {
        setIndex(event.target.value);
      };
      return (
        <div>
          <h1>Super Converter</h1>
          <select value={index} onChange={onSelect}>
            <option value="0"> Minutes & Hours </option>
            <option value="1"> KM & Miles </option>
          </select>
          {index === "0" ? <MinutsToHours /> : null}
          {index === "1" ? <KmToMiles /> : null}
        </div>
      );
    }
    ...