오늘의 React 코딩 챌린지: 통화 변환기 툴 만들기

Source: Dev.to

왜 통화 변환기를 선택했는가

통화 변환기는 React 초보자와 중급자 모두에게 딱 맞는 작은 프로젝트입니다. 다음과 같은 요소를 포함합니다:

• 사용자 입력을 동적으로 처리하기
• 여러 상태 변수를 관리하기
• 외부 API에서 데이터 가져오기
• 조건에 따라 결과 표시하기
• 오류를 우아하게 처리하기

useState와 useEffect를 사용하도록 강제하고, 비동기 데이터 가져오기를 깔끔하고 React 친화적인 방식으로 다뤄보고 싶었습니다.

구현 방법

우선 금액 입력 필드를 간단히 만들고, 변환할 통화와 변환될 통화를 선택하는 두 개의 드롭다운을 추가했습니다. 핵심 로직은 Frankfurter API를 사용하며, 이는 간단하고 테스트용으로 무료입니다.

React 컴포넌트는 여러 상태 변수를 추적합니다:

const [amount, setAmount] = useState(0);
const [optionA, setOptionA] = useState('USD');
const [optionB, setOptionB] = useState('EUR');
const [result, setResult] = useState(null);
const [error, setError] = useState(null);

useEffect를 이용해 금액이나 선택된 통화가 바뀔 때마다 fetch를 트리거합니다. API가 성공적으로 응답하면 결과를 업데이트하고, 오류가 발생하면(예: 두 드롭다운에서 같은 통화를 선택한 경우) 친절한 오류 메시지를 표시합니다.

이 작은 로직 루프를 통해 조건부 렌더링, API 오류 처리, 그리고 React에서의 반응형 프로그래밍을 훨씬 더 잘 이해하게 되었습니다.

핵심 학습 내용

• React Hooks 실전: useState와 useEffect를 함께 쓰는 것이 자연스럽지만, 의존성 배열에 신경을 써야 합니다.
• API 가져오기와 오류 처리: 응답이 유효한지 항상 확인하고, 엣지 케이스를 처리합니다.
• 조건부 UI 렌더링: 앱 상태에 따라 결과나 오류 메시지를 보여줘 UI를 사용자 친화적으로 만듭니다.
• 컴포넌트 설계: 작은 프로젝트라도 깔끔하고 유지보수 가능한 코드를 고민할 기회가 됩니다.

개선 가능 사항

UI를 다듬거나 추가 기능을 넣는 데는 신경 쓰지 않았습니다—이 프로젝트를 다른 사람들의 시작점으로 만들고 싶었기 때문이죠. 개선하고 싶다면 다음을 고려해 보세요:

• 사용자가 입력할 때 실시간 변환 적용하기
• 데이터를 가져오는 동안 로딩 스피너 표시하기
• 더 나은 스타일링과 반응형 디자인으로 UX/UI 개선하기
• 옵션을 하드코딩하지 않고 모든 통화를 동적으로 지원하도록 확장하기

학습용 놀이터이니 자유롭게 포크하고, 실험하고, 자신만의 프로젝트로 만들어 보세요.

프로젝트 확인하기

실제 프로젝트를 보거나 코드를 살펴보고 싶다면 CodeSandbox에서 확인할 수 있습니다:

React Currency Converter Challenge