JSX는 class / for 과 같이 JavaScript에서 선점된 문법 용어를 사용 못한다.

class는 className으로 for은 htmlFor로 바꿔쓴다

class → className, for → htmlFor로 변환한다.

<script type="text/babel">
    const root = document.getElementById("root");
    const App = () => {
      return (
        <div>
          <h1>Super Converter</h1>
          <label htmlFor = 'minutes'>Minutes</label>
          <input id='minutes' placeholder="Minutes" type="number" />
          <label htmlFor = 'hours'>Hours</label>
          <input id='hours' placeholder="Hours" type="number" />
        </div>
      );
    };
    ReactDOM.render(<App />, root);
  </script>

react에서 form 다루는 법

input의 입력값 찾기

input 태그에 사용자가 입력해 준 데이터(input.value)를 우리가 받고 조작하고 싶다.

state를 선언해준 다음 input 태그 안의 value의 값을 그 state로 해 준다. 이렇게 하면 value를 언제든지 우리가 수정해줄 수 있다.

해당 state의 modifier를 input의 이벤트 핸들러에 선언해준다. 이 이벤트 핸들러가 하는 일은 바로 input의 value 값을 업데이트하는 역할이다.

• 이제 input에 값이 입력되는 event가 실행될 때마다 우리가 키보드를 통해 입력하는 이벤트 event.target.value에서 입력한 값을 찾을 수 있다.
• 이벤트 핸들러가 실행되면서 이 event.target.value를 인자로 받을 수 있다.
• 이어서 modifier가 호출된다. state의 값을 인자로 받은 새 value 값으로 바꿔준다.
• state의 값이 새 value로 바꿔주고, 따라서 input의 value도 바뀐 새 state 값으로 바뀐다.

만약 이벤트 핸들러를 지워주면 event.target.value는 바뀌어도 input의 value는 바뀌지 않는다.

• 코드

minute → hour 만들기

우선 hour의 input의 value의 값을 minutes에 입력하면서 바꿔준 state 값을 이용해서 계산해준다.

• 코드