[솔로프로젝트] My small trip(4) - 리액트로 환율계산기 만들기 (환율 API)

해외 여행을 하다보면 매일 앱에서 확인했던 것은 그날의 환율과 날씨였다. 오늘은 여행 준비 혹은 여행중에 쓸 수 있는 환율 계산기를 만들어보기로 했다. 

 

환율API

구글링을 통해 매일 새로운 정보로 업데이트 되는 환율 API를 받을 수 있었다.  

아래의 주소에서 매일 달라지는 정보가 업데이트 되는 것을 확인 할 수 있다. 바꾸고싶은 나라의 화폐를 입력하면 해당하는 값을 받을 수 있다. 코인을 비롯한 여러가지 화폐들을 계산할 수 있는데, 아무래도 너무 옵션이 많으면 더 헷갈릴것 같아서   나는 사람들이 많이 쓸법한 화폐들을 남겨 놓고 나머지는 옵션에서 지워줬다. 

 

 

환율 옵션 만들기 

 

추려준 옵션들을 통해 유저들이 자신이 가진 화폐(from)에서 바꾸고 싶은 화폐(to)를 선택할 수 있는 옵션 창을 만들었다. 

그리고 받은 화폐의 소수점이 과하게 나오는 것을 방지하고자 소수점 2자리에서 끊어주었다. 일단 화폐의 앞에 태국 국기 이모지를 넣어봤는데 이것도 화폐의 단위 마다 다르게 나오도록 바뀌게 해야 할 것 같다. 

 

 

화폐 단위 추가하기 

단순히 1원을 xx달러로 바꾸지 않고 100원, 10000달러 등을 입력할 수 있게 입력창을 만들어야겠다. 

input을 만들고, 여긴 number만 들어갈 수 있게 했고 이를 state로 관리 해 주었다. 계산하기 버튼을 만들어서 클릭시 계산한 currency에 이 input의 값과 곱한 값을 표시할 수 있게 해 주었다. 

 

State줄이기 

state는 줄일수 있다면 줄이는게 좋다고 들었다. state가 변경될때마다 리렌더링이 될 수 있고, 불필요한 다시 렌더링이 발생할 수 있으며 전반적으로 코드가 복잡해지며 관리를 해야 하는 결과 값이 많아지기 때문이다. 

현재까지의 코드에서는 state가 5개 쓰이고 있다. 화폐값2개(from, to), 이 두 화폐를 가지고 계산한 환율값, input값, 계산하기를 눌렀을때 화폐와 input값을 곱한 결과값인데, 여기서 마지막 값은 굳이 필요가 없다고 생각했다.

input값을 기본적으로 1로 두고, 환율값과 곱한 값으로 관리하면 된다고 생각했다. 그래서 마지막값을 state로 관리 하지 않도록 코드를 바꿔주었다. 

 

코드를 이렇게 바꾸니, input값이 변할때마다 환율의 결과가 바로바로 달라지며 리렌더링 되었고, 계산하기버튼을 누를 필요가 없어졌다. 유저의 입장에서는 이가 더 편할 것이라고 생각해서 이렇게 유지하기로 했다. 계산하기 버튼은 더이상 필요가 없으니 지워주었다.  

 

유저의 입장에서는 숫자를 넣는 input이 아래에 있으면 헷갈릴 것이라 생각해 currency from 의 값과 동일 선상에 있도록 수정해 주었다. 그리고 input과 함께 있는 셀렉트박스의 길이를 수정해서 아래의 셀렉트 박스 길이와 동일하게 만들어 주었다. :)

 

 

참고 :

https://pusha.tistory.com/entry/%EB%A6%AC%EC%95%A1%ED%8A%B8%EB%A1%9C-%ED%99%98%EC%9C%A8-%EA%B3%84%EC%82%B0%EA%B8%B0-%EB%A7%8C%EB%93%A4%EC%96%B4%EB%B3%B4%EA%B8%B0-%EB%AC%B4%EB%A3%8C-%ED%99%98%EC%9C%A8-API

리액트로 환율 계산기 만들어보기 (무료 환율 API)

https://github.com/fawazahmed0/currency-api/blob/1/2023-01-01/currencies.json