[React] 시간 변환기 만들기

연구 날짜: 2023년 11월 3일

---

시간 변환기를 만들기 전에

만들다

1. 리셋 버튼 만들기

2. 재설정 기능을 생성합니다(값이 0으로 설정됨).

3. 분 -> 시간으로 변환하는 함수 만들기

첫 번째,

버튼 태그를 사용하여 버튼 만들기

onClick 이벤트를 제공하십시오.

버튼을 클릭하면 onClick 이벤트가 실행되고 리셋 기능이 실행됩니다.

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

서둘러 재설정 기능을 정의하십시오.

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

재설정 버튼을 클릭하면 값이 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>

실행 결과는 다음과 같습니다.