[React] Inputs and State

choieunin·2022년 5월 26일
0

React JS

목록 보기
10/10

unit conversion(단위 변환) 앱을 만들어보자.

  1. minutes -> hours
funtction App() {
	return (
    	<div>
        	<h1>Super Converter</h1>
            <input placeholder = "Minutes" type = "number"/>
            <input placeholder = "Hours" type = "number"/>
        </div>
    );
}

1. JSX

우리가 알다시피 JSX는 HTML과 매우 유사하다.
위에 코드에서도 아래의 코드를 HTML로 작성해도 문제가 없었다.

<div>
  <h1>Super Converter</h1>
  <input placeholder = "Minutes" type = "number"/>
  <input placeholder = "Hours" type = "number"/>
</div>

예를 들어, label 태그를 사용해보자. label은 input 옆에 써주는 글씨이다.
label을 각각 넣고 label을 input에 연결해주기 위해 id도 넣고, HTML은 for 속성을 사용한다.

funtction App() {
	return (
    	<div>
        	<h1>Super Converter</h1>
            <label for = "minutes">Minutes</label>
            <input id = "minutes" placeholder = "Minutes" type = "number"/>
            <label for = "hours">Hours</label>
            <input id = "hours" placeholder = "Hours" type = "number"/>
        </div>
    );
}

하지만 for은 JS 용어이다. 우리는 지금 JSX를 사용하고 있고 JSX는 HTML과 비슷하지만 다른 점 몇 가지가 있다.
예를 들면, class를 사용하면 안 된다는 것, className, for을 쓰면 안 된다는 것.

그럼 어떻게 해줘야 하나??

htmlFor

이라고 써주어야 한다.

2. onChange

const [minutes, setMinutes] = React.useState() 에서는 array를 제공하는데, 첫 번째 element가 현재 값(minutes)이고, 두 번째 element가 minutes를 수정하는 modifier 함수가 들어간다.
그리고 value를 input에게 줄 수 있다.

funtction App() {
	const [minutes, setMinutes] = React.useState();
	return (
    	<div>
        	<h1>Super Converter</h1>
            <label for = "minutes">Minutes</label>
            <input 
            value = {minutes}
            id = "minutes" 
            placeholder = "Minutes"
            type = "number"/>
            <label for = "hours">Hours</label>
            <input id = "hours" placeholder = "Hours" type = "number"/>
        </div>
    );
}

이제 우리가 원하는건 사용자가 다른 값을 입력할 때마다 value를 업데이트 시키는 것이다. 이벤트는 바로 onchange이다.

funtction App() {
	const [event.target.value, setMinutes] = React.useState();
    const onChange = () => {
    setMinutes(event.target.value);
    };
	return (
    	<div>
        	<h1>Super Converter</h1>
            <label for = "minutes">Minutes</label>
            <input 
            value = {minutes}
            id = "minutes" 
            placeholder = "Minutes" 
            type = "number"
            onChange = {onChange}
            />
            <label for = "hours">Hours</label>
            <input id = "hours" placeholder = "Hours" type = "number"/>
        </div>
    );
}
profile
안녕하세요! 만나서 반갑습니다!

0개의 댓글