~0430 Input&state (minutes -> hours Part.2)

노동 뒤의 휴식이야말로 가장 편안하고 순수한 기쁨이다. -임마누엘 칸트

휴식 뒤의 노동이야말로 가장 불편하고 악랄한 고통이다. -최민규는 칸초

 

주말에는 적당히 부지런한 민규씨 재밌게 주말을 즐기고 일요일과 월요일의 경계

즉, 쉬어야 할까 공부해야 할까 싶은 이 스릴을 즐기며 글을 작성한다. 목표는 배운거 정리 + 일주일을 미룬 생일 선물 리뷰글 + 가능하다면 약간의 근력운동 후 취침 근데 오늘 리액트 복습에 사진, gif가 많이 들어가고내일 학준이랑 운동해야되서 일찍 자야 하는데 할 수 있을까? 몰라 파이팅이야 민규야 가자!

약간의 비속어는 말이다. 글을 더 맛깔나게 만든다 다만 타인을 향한 비속어가 아닌 상황 강조를 위한 어쩌구 저쩌구...

이번 복습은 저번시간에 코드를 전체 띄우고 하자니 너무 난잡하고 집중하기 힘들어서

이번에는 시간이 오래 걸리더라도 중간중간 메모를 많이 하고 사진을 많이 남기기로 했다 ⍝ ˘ ᵜ ˘ ⍝

 

저번 시간에 마무리 못한 부분

1. min -> 시간으로 만드는 기능밖에 구현을 못함

2. hour -> min으로 만드는 기능 필요

3. min, hour중 하나를 변환시킬 때 나머지 하나를 선택하지 못하게 하는 기능 필요

 

 

Flip(위의 3번) 기능을 구현 하 Flip버튼을 만든다 버튼 이름 Flipped라고 되어있는데 나중에 Flip이라고 고쳤다

min을 입력해 hour을 보고 있는 상황에서 버튼을 누르면 hour을 입력하고 min은 입력하지 못하도록 바꿔주는 역할

onFlip이라는 함수를 실행하도록 했다.

위의 기능을 추가하기 위해 state를 하나 더 생성 flipped라는 초기값, setFlipped를 통해 수정됨

line12를 보면 알듯이 분, 시간은 숫자를 입력받아 변형시켰다면 Flip에서는 두 상황 1. 분을 입력할 때 2. 시간을 입력할 때만 나오면 되기에 True, False를 통해 분 div와 시간 div를 각각 조정하도록 한다. 경우에 따라 flipped는 True와 False를 번갈아가면 바뀔 것임

이제 Flip버튼을 클릭했을 때 무슨 기능을 할지 onFlip함수를 구현한다.

onFlip이 되면 state의 flipped의 값을 반대로 만들어주자 그러면 실행할 때마다 False, True로 번갈아 변경되니

우리가 원하는 min, hour을 입력할 때 마다 상황을 만들어줄 수 있다

다만, 저번 시간에 나왔다시피 state의 값을 그대로 이용하는 것은 나중에 오류를 범 할 수 있으므로 

현재 state값을 나타내 주는 current를 이용해 작성하자 current값을 반대로 바꿔줌

hour과 min div에 disabled라는 속성을 추가한다 입력을 못하는 Input창이 되는 거다 홍철 없는 홍철팀

우리가 원하는 기능이 min->hour 할 때는 당연히 hour을 입력 못해야 하니까 필요한 속성이다

이것을 우리가 위해서 구현했던 flip과 합치면 된다.

flipped값이 초기에 false이니 즉 min-> hour 할 때 hour창이 disabled상태 반대는 min창이 disabled인 상태이다

1. flip버튼을 클릭 flipped가 onFlip에 의해 True가 됨 min의 disabled가 활성화되므로 hour창에 입력 가능

2. 다시 클릭 시 flipped가 onFlip에 의해 False가 됨 hour의 disabled가 활성화되므로 min창에 입력 가능

3. 이해됐다면 밑의 gif를 보자

문제 발생 flip은 잘되는데 hour -> min기능이 개판이다

당연히 안 나오는 게 당연하다 우리는 아직 flip의 기능 + min-> hour로 바꾸는 기능만 구현했으니

이 기능을 hour에 추가해보자 그전에 disabled속성의 값을 더 편하게 바꿔보자

위와 같이 min에는 flipped를 hour에는 !flipped를 넣으면 위와 같은 기능을 할 것이다.

1. flipped의 초기값은 False. min의 disabled 비활성화, hour의 disabled는 활성화
2. flip버튼 클릭 flipped값 True로 바뀜
3. hour의 disabled 비활성화, min의 disabled는 활성화

미세한 차이지만 이런 절약이 큰 절약이 되는 거니까 항상 더 효율적인 코드를 생각하자

급발진 조금씩 캡쳐 잘 하다가 한번에 했음 ㅎㅎ 설명을 구체적으로 쓸게

이어서 이제 min처럼 hour도 입력했을 때 min으로 변하도록 기능을 구현해보자 근데 이게 혼자 해볼라 했다면

꽤나 골치 아프다 단순히 hour*60을 해서 min div에 표현하도록 하면 되지 않냐? 싶은데 내가 입력함과 동시에

min->hour로 변환해주니 min-> hour 변환할 때, hour -> min으로 변환할 때 상황을 구분해서 구현해야 한다.

 

 

먼저 line12를 보면 저번 시간에는 state를 minutes, setminutes를 했지만 이제는 hour도 수정하는 역할을 하는 state에

걸맞게 이름을 값은 amount, 함수는 setAmount로 바꿨다 까먹지 않고 div 안이나 onChange함수 내부에도 동일하게

이름을 변해주었다. 함수나 변수에 이름은 상황에 맞게 항상 갱신해주는 게 중요하니까

여자 친구랑 헤어지면 명칭이 전 여자 친구로 바뀌는 것처럼

 

그다음은 hour에도 onChange를 추가해 input에 hour을 입력 시 수정할 수 있게끔 구현 자 그다음 우리가 궁극적으로

필요한 min을 입력 시에는 hour로만 바뀌도록, hour을 입력시에는 min으로만 바뀌도록 하는 조건문이 필요하다.

line27, 33에 각각 flipped값에 따라 분을 표현할지 시간을 표현할지 나타내었다.

 

line27, 33 이해

1. 초기 flipped값 false 즉 min-div amount 분 그대로 min에는 표현됨, hour-div에서는 amount/60 시간으로 표현됨
2. flip버튼 클릭 flipped값 True로 변경 hour input에 원하는 시간 입력 ===amount값이 됨
3. flipped값 True 즉 min-div에서 amount*60분으로 표현, hour-div에서는 amount그대로 시간으로 표현

문제가 발생해벌임 flip을 누르면 계속 지맘대로 바뀜 신나서

121분이 궁금해서 입력하고 flip 하니까 hour이 121되고 -> 당연히 amount그대로 가져오니까

다시 flip 누르니까 121시간을 분으로 한 7260 시간 되는 기적 발생 이걸 방지하기 위해 flip에 리셋 기능을 추가하자

아 위의 코드표에는 이미 추가했다 추가 안 하면 이렇게 됨 암튼 추가하면 밑에 처럼

무야호

깔끔하게 완성 똑 부러진 컨버터 완성 state에 대한 이해와 오래간만에 input창 만지다 보니까 

html, css 만지면서 내 백예린 페이지, 공부하자 페이지 만든 거 생각나네 ʕ ´•̥̥̥ ᴥ•̥̥̥`ʔ

암만 봐도 난 내가 꾸미 고픈 대로꾸미고 막 모양 만들고 요런 게 재밌는 듯

근데 그런 거 하려면 이런 것도 알아야 멋진 어른이 될 수 있으니

배우자 계속 이제 생일선물 리뷰글 쓰러 가야지 운동은 절대 못하겠다 이번 주 첫 일과 끝!