[리액트] 단순한 컨버터 구현을 통한 State 연습

 

 

cf. useState()으로 비워서 작성했기 때문에, 첫번째 인풋 창에 처음에는 아무 것도 안 적혀 있어야 하는데 minutes이라고 쓰여있는거다. 알고 봤더니, value를 오기해서 일어났던 일 !

 

 

input을 value에 연결함으로 그 속성의 속성값 변수({minutes}와 같은)로 우리가 input 외부에서도 업데이트할 수 있게 된다.

 

 

 

 

 

리셋 버튼을 하나 만들어 reset이라는 함수를 이벤트 리스너로 걸어줬다. 

reset 함수에서 정의해줬듯이 이 함수가 실행하면 state의 값은 0으로 바뀐다.

즉, 인풋창에 보여지는 값이 0이 되게 만든 것이다.

단, hours 인풋에 뜨는 0은 minutes/60으로 인한 값이다 !

 

 

현재 위의 코드는 minutes 창에는 change 이벤트를 걸어 상태가 변하면 실시간으로 바뀐 state가 반영되지만,

hours 창에는 걸려있는 이벤트가 없어 인풋창에서 입력해도 변화가 없다.

그래서 다음에는 두 창 중 활성화되는 창을 번갈아 바꿔주는 Flip 버튼을 만들어 주려고 한다.

 

hours 인풋에도 동일하게 change 이벤트를 걸어주고, flip 버튼을 누르면 처음엔 minutes 인풋이 활성화되어 있다가

비활성화되면서 hours 인풋이 활성화되게 해주며 누를 때마다 서로 활성화 상태를 바꿔가며 서로의 값을 변환해주도록 작성한다.

 

 

 

 

 

 

 

flip 버튼을 누를 때마다 활성화되는 창이 바뀌는게 보인다.

근데, 이 때의 문제는 flip을 할 때 이전의 minutes 값을 hours가, hours 값을 minutes가 갖게 되서 다소 이상하다.

그래서 어떻게 해결했냐면, onFlip 이벤트리스너 함수에 먼저 리셋 함수가 작동하도록 넣어준다. 

그러면 flip하기 전에 각 창에 0으로 깔끔하게 세팅되고 입력할 수 있다.