[리액트] 정리 3

1. JSX 와 HTML 차이

- JSX 에서 for, class는 사용할 수 없는 단어이다. 

- label을 위해서 for 대신 htmlFor을 사용한다.

 

2. form을 만들어서 input을 받아보자. 

function App(){                  
      const [minutes, setMinutes] = React.useState();  // [initial value, modifier]                              
      const onChange = (event) => { // event객체를 전달 받는다. 
        setMinutes(event.target.value); // input의 value를 가지고 modifer를 작동시킨다. 
      };
      return (
        <div>
          <div>
          <h1>Super Converter</h1>
          <label htmlFor="minutes">Minutes:</label>
          <input 
            id = "minutes"
            value = {minutes} // 인풋을 변수로 받는다. 
            placeholder="Minutes" 
            type="number" 
            onChange={onChange} // 여기서 업데이트 -> rerender가 일어난다. 
          />
          </div>
          <div>    
          <label htmlFor="hours">Hours:</label>
          <input 
            id = "hours"
            value = {Math.round(minutes / 60)} // 분을 시간 단위로 바꾸어서 표기 
            placeholder="Hours" 
            type="number" 
            disabled // 입력을 받지 못하게 
          />
          </div>
        </div>  
        );
    }