[노마드/React로 영화 웹 서비스 만들기] Ch03 STATE | 5. Inputs and State

참고자료: 노마드 코더 ReactJS로 영화 웹 서비스 만들기 https://nomadcoders.co/react-for-beginners/lobby

 

1.  입력하는 minutes값 업데이트 하기

---

분(minutes)을 입력하면 시(hours)단위로 바꿔주는 기능을 만들어보자!

<script type="text/babel">
    function App() { 
        const [minutes, setMinutes] = React.useState()
        const onChange = (event) => {
            setMinutes(event.target.value);
        }
        return(
            <div>
                <h1 className="hi">Super Converter</h1>
                <label htmlFor="minutes">Minutes</label>
                <input 
                  value={minutes} 
                  id="minutes" 
                  placeholder="Minutes" 
                  type="number" 
                  onChange={onChange}
                />
                <h4>You want to convert {minutes}</h4>
                <label htmlFor="hours">Hours</label>
                <input id="hours" placeholder="Hours" type="number"/>
            </div>
        );
    }
    const root = document.getElementById("root");
    ReactDOM.render(<App />, root); 
</script>

👉🏻onChange: input에 변화가 생기면 할당해준 행위를 실행한다.

• Minutes input tag를 만들어준다. onChange에 onChange함수를 호출한다.
• onChange함수에서 setMinutes를 이용해 입력한 수를 minutes state의 값으로 갱신한다.
• h4 tag에서 갱신된 minutes를 출력한다.