~0507 취중코딩 State마무리(km-mile변환기)

요 근래 2일간 쏘주 5병을 마셔부려따 다행히 친구 붙잡아서 토요일 점심에 공부를 오랜만에

이어서 하고있다 오늘은 State단계를 마무리하고 그 과정에서 km - mile변환기를 만들고

저번에 만든 시간-분 변환기랑 같이보여주는게

아닌 두 변환기를 각각 보고플 때 볼 수 있도록 만들었다 자세한 건새로 작성한 코드와 그 설명을 보면서 이해하자

 

잡담) 요즘 날씨가 부쩍 덥다. 낮에는 여름 밤에는 가을을 보여주는 날씨다. 여름이 오면 내가 좋아하는 복숭아랑(딱복)

포도, 자두를 왕창 먹어야지 작년에는 군대여서 포도는 원없이 먹었지만 복숭아 자두는 못 먹었단 말이야

-------------------------------------------------------------------- 아 출발 -------------------------------------------------------------------

 

App이라는 컴포넌트는 오늘 만들 km-mile변환기와 저번에 만든 min-hour변환기를 선택에 따라 보여주는 기능을 한다.

따라서  이전 시간 App에 있던 min-hour변환기는 MinutesToHours에 넣고, App컴포넌트부터 필요한 기능에 맞게 구현하기 시작했다.

 

이런식으로! 오늘 만들 코드의 전체적인 뼈대이다.

Km-Mile변환기는 min-hour변환기에서 min, hour을 각각 km, mile로 바꾸고 시간 분을 60 곱하고 나누었다면 km, mile에 맞는 수를 곱하고 나누기만 하면 되니, 간단한 부분이다. (오늘 진짜 수정할 때마다 지나치게 캡처 잘했네)

 

앞으로 min-hour은 MH, km-mile은 KM로 표현하겠음

 

위 사진에서 바뀐점은 select와 option태그 추가 그리고 각 option에 value를 넣어줌

 

App의 기능을 구현하기 위해 select와 그 안에 옵션 태그를 추가해 원하는 변환기를 사용할 수 있도록 했다.

useState를 통해 받은 array의 데이터 값을 index, modifier의 이름은 setIndex로 설정했다. 초기값은 일단 0

그리고 MH와 KM변환기에 각각 value값을 0과, 1을 부여해 이 value들을 index로 사용하고, setIndex를 통해

내가 MH를 사용하고 싶을 때는 0의 값을, KM를 사용하고 싶을 때는 1의 값을 갖도록 하자.

 

select태그 안에 onChange속성을 넣어 Value를 가져오자

 

select안에 onChange를 넣어 onSelect를 통해 값을 받도록 했다. Flip 할 때 사용한 거랑 같음
console.log를 통해 확인하니 각각 select에서 다른 옵션을 고를 때마다 지정한 value값이 나오고 이를 통해
우리가 변환할 수 있음을 확인했다. 다음 gif를 보면 select에서 MH변환기, KM변환기를 클릭할 때마다 해당하는

value를 가져오는 걸 볼 수 있다. (밑에 콘솔 창 보면 되게 작게 1, 0, 1, 0 나오고 있음)

 

console.log대신 값을 받도록 setIndex로 바꾼다.

index값을 나중에 수정할 때를 생각해 select안 value에 index를 넣어주고

onSelect에서 받아온 value는 setIndex를 통해 state에 value값을 넣도록 한다 index = value가 됨

 

갑자기 뭔가 확 많아진 것 같다고 쫄지말자 상대는 콤퓨타다

line57~58 index로 가져온 value값에 따라 MH와 KM변환기를 보여줄 조건문을 작성한다. 그냥 적으면 text로 인식해

{ }를 사용하면 jsx문법으로 인식하므로 { } 안에 index값이 0일 때는 MH변환기, 1일 때는 KM변환기를 보여주도록 했다.

그리고 맨 처음 들어갔을 때 option을 고르라고 알려주는 option(line52) Choose your units을 추가했다.

value값은 "xx"로, 초기값도 "xx"로 수정했다 - line44 그래야 들어왔을 때 어떤 변환기 사용할지 골라! 하고 알려주는 신세가 되니

 

setIndex를 통해 값이 새로워질 때마다 index값을 새로 리 렌더링해 보여줄 컴포넌트를  매번 바꿔준다

[리렌더링 조건]
1) props이 바뀔 때
2) state가 바뀔 때
3) 부모 컴포넌트가 리렌더링 될 때

 

새로운 내용으로 만든 건 끝났다 이제 추가적인 편의 기능이나 아까 말한 KM변환기를 만들어주면 되는데 이건 뭐

MH변환기 갖다 박아서 단위 값이랑 km-mile변 할 때 곱하고 나눠줘야 하는 값만 수정해 주었다.

이지 하구만 toFixed는 소수점 3자리수만 보여줌

아 이건 뭐냐면요

위 사진 MH변환기를 만지작 거리다가 50분을 적어도 1시간이라고 변환하길래 자세히 보니 Math.round의 경우 반올림이므로 50/60은 약 0.8? 그래서 반올림해서 1 되니까 1시간이라고 변환하길래 반내림해주는 floor로 수정했다.

+ 36line에 button에 inverted가 true이면 turn back, 그리고 false이면 inverted가 나오도록 했다.

ㄴ>  처음 누를 때 변환하기  누르면 되돌리기 이런 너낌

완성된 변환기 두 개와, 그 두 개를 담고 있는 App까지! 야호 이제 주말을 즐기자