input 과 State Functions으로 분 → 시간 단위 변환 앱 만들기 (2)

 

1. setState 의 dafault 값을 0으로 만들기

    function App() {
      const [minutes, setMinutes] = React.useState(0);
      const onchange = (event) => {
        setMinutes(event.target.value);
      };

          ...

 

 

 

2. hours 컨트롤 하기

...
      const onchange = (event) => {
        setMinutes(event.target.value);
      };
      return (
        <div>
          <h1>Super Converter</h1>
          <div>
            <label htmlFor="minutes"> Minutes </label>
            <input
              value={minutes}
              id="minutes"
              placeholder="Minutes"
              type="number"
              onChange={onchange}
            />
          </div>
          <div>
            <label htmlFor="hours"> Hours </label>
            <input
              value={minutes}
              id="hours"
              placeholder="Hours"
              type="number"
            />
          </div>
        </div>
 ...

 

Minutes를 수정하면 Hour도 수정되지만, Hours에는 onChange event가 없어서 수정이 되지 않는다.

 

3. 분을 시 단위로 수정하기

            <input
              value={minutes / 60}
              id="hours"
              placeholder="Hours"
              type="number"
            />
            
            
            혹은
            
             <input
              value={Math.round(minutes/60)}
              id="hours"
              placeholder="Hours"
              type="number"
            />

 

4. 리셋버튼 만들기

      const reset = () => setMinutes(0);
      <button onClick={reset}> Reset </button>