[React] input과 state

label과 htmlFor

<label>태그는 말그대로 요소의 라벨을 정의할 때 사용하는데 

input 태그의 id값을 연결해주기 위해 for을 사용한다.

그래서 <label for="id값" > 이런식으로 써주는데  이렇게 쓰면 jsx문법에 맞지 않는다.

왜냐면 이미 for는 js 문법이기 때문에 htmlFor이라고 써줘야 한다. 마치 class를 className이라고 써주는 것처럼 

 

 

사용자가 input에 쓰고 있는 value state통해 가져오기 

아무튼 이렇게 input을 잘 썼는데 사용자가 input 에 쓰는 value를 어떻게 리액트를 통해 제어할 수 있을까?

바로 useState를 통해 가져올 수 있다!

value에 현재 minutes를 넣어준다. 

 

이제 유저가 다른 값을 입력할 때마다 이 value를 업데이트 시켜볼 것이다. 이때 사용하는게 onChange라는 프로퍼티이다. 

즉 input에 변화가 생길때마다 event를 listen 해줘야하는데 이걸 onChange함수를 통해 할 수 있다. 

 

event를 매개변수로 넣어주면 event에서 target을 접근할 수 있는데 target안에 value가 있다!

 

++) 바닐라 js event 다시 생각

onChange event가 발생하면 js가 onChange함수 실행 onChange의 첫번째 파라미터는 방금 실행된 event의 정보 담고 있음.  console.dir(event)하면 event 안에 target이 있고

target안에 사용자가 현재 입력하는 값인 value가 있다!

 

이제 이것을 minutes state에 담아줘야 하기 때문에

현재 event로 받아온 value값(입력값)을 setMinutes안에 넣어준다. 그러면 minutes의 현재 state가 유저가 입력하는 값일것이고 이것이 <h4> 태그 안에 {minutes}에 잘 반영이 될 것이다. 

 

disabled

이제 hour을 기준으로 minute을 바꿀 수 있게 해볼 것이다. 

이때 flipped라는 boolean 형의 state를 사용할 것인데 초기값을 false로 줬다. 

 

Flipped 버튼을 만들어 만약에 flipped 버튼을 클릭하면 onFlip 함수로 이동하는데

함수가 호출되면 값이 0으로 바뀌고 setFlipped 안에 함수를 넣어서 현재 boolean 형의 반대가 리턴된다. 예를 들어 현재 state가 true면 false가 리턴됨

html의 input 태그의 disabled속성은  true면 input요소가 비활성화 된다. 그래서 flipped 버튼을 누르면 minutes이 비활성화 ,hour가 활성화 / flipped 버튼을 한번 더 누르면 minutes이 활성화 되게 하려고 한다. 

우선 minutes 기준으로만 본다면 flipped이 true일 때 hour로 바뀌니까 input요소가 잠겨야 한다. 그래서 js의 === 문법을 사용해 flipped이 true면 disabled=true가 되고 flipped이 false면 disabled=false가 되어 input이 잠긴걸 풀어주게 구현했다. 

 

hour의 경우 flipped된 상태라면 state에 있는 값 그대로 보여주고 (user가 쓴 것 그대로)

flipped 되지 않으면 60으로 나눠서 hour로 변환해서 보여줄 수 있게 해보겠다.

반대로 minutes도 flipped된 상태라면 60을 곱해서 시간을 기준으로 한 분을 보여주고

 fliiped되지 않으면 현재 유저가 쓴 값 그대로 보여주도록 하겠다. 

이때 삼항연산자를 사용해 볼 것이다. 

 

<minutes 기준>

 

<hours 기준>