react

nomad code_react js로 영화앱 만들기_#3.5 ~ 3.8

Kale_coding 2022. 11. 9. 10:41

분 ↔ 시간 변환 함수

<body>
  <div id="root"></div>
</body>

<script type="text/babel">
  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();
      setInvert((current) => !current);
    };
    return (
      <div>
        <h1>Converter</h1>
        <div>
          <label htmlFor="minutes">Minutes</label>
          <input 
            id="minutes"
            type="number"
            placeholder="Minutes"
            value={inverted ? amount * 60 : amount}
            onChange={onChange}
            disabled={inverted}
          />
        </div>
        <div>
          <label htmlFor="hours">Hours</label>
          <input 
            id="hours"
            type="number"
            placeholder="Hours"
            value={inverted ? amount : Math.round(amount / 60)}
            onChange={onChange}
            disabled={!inverted}
          />
        </div>
        
        <button onClick={reset}>Reset</button>
        <button onClick={onInvert}>{inverted ? "hours" : "minutes"}</button>
      </div>
    );
    
    const root = documnet.getElementById("root");
    ReactDOM.render(<App />, root);
  };
</script>
  • minutes, hours의 입력값은 amount로 받는다
  • 각각의 input에 입력할 수 있는 유무(disabled)는 inverted의 boolean값에 의해 결정되며 이 값은 onInvert함수를 가진 버튼을 클릭하면 스위치 된다