[React] 시간 변환기 만들기 (분 ->시)

학습일 : 2023. 03. 11

---

시간 변환기 만들기에 앞서

해야할 것

1. 리셋버튼 만들기

2. 리셋(값이 0으로 세팅되는) 함수 생성하기

3. 분->시 변환 함수 생성

 

 

가장 먼저,

button 태그를 통해 버튼을 생성하고

onClick 이벤트를 준다.

버튼을 클릭하게 되면 onClick 이벤트가 실행되고 reset 함수가 실행된다.

{/*버튼*/}
<button onClick={reset}>Reset</button>

 

서둘러 reset 함수를 정의한다.

 

// 리셋 버튼 눌렀을 때 실행되는 함수 생성
      const reset = () => {
        setMinutes(0);
      };

 

reset 버튼 클릭시 값이 0이 된다.

 

 

 

다음으로,

div 태그 안

Math.round() 메서드를 통해

입력받은 값을

소수점 첫 번째 자리에서 반올림하여

그 결과값을 반환하도록 조치한다.

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

 

 

 

전체 코드

<script type="text/babel">
    function App() {
      // state 생성
      // array 의 첫번째 item 은 minutes 이며 이는 value 이다.
      // array 의 두번째 item 은 setMinutes 이며 이는 value를 수정하고, component를 새로고침 할 때 쓰는 함수이다.
      const [minutes, setMinutes] = React.useState(0);
      // onChange 함수 생성
      const onChange = (event) => {
        setMinutes(event.target.value);
      };
      // 리셋 버튼 눌렀을 때 실행되는 함수 생성
      const reset = () => {
        setMinutes(0);
      };

      return (
        <div>
          <h1>Super Converter</h1>

          <div>
            <label htmlFor="minutes">Minutes</label>
            <input
              value={minutes} // minutes 값이다. 이는 위 const [minutes, setMinutes] 즉 state에 있다.
              id="minutes"
              placeholder="Minutes"
              type="number"
              onChange={onChange}
            />
          </div>

          <div>
            <label htmlFor="hours">Hours</label>
            <input
              value={Math.round(minutes / 60)} // Math.round() 는 소수점 이하를 반올림 하게 됨
              id="hours"
              placeholder="Hours"
              type="number"
            />
          </div>

          {/*버튼*/}
          <button onClick={reset}>Reset</button>
        </div>
      );
    }
    const root = document.getElementById("root");
    ReactDOM.render(<App />, root);
  </script>

 

 

 

실행결과는 아래와 같다.