Day 13 Mission

과제) 원-달러 환율 변환기 만들기

이번 과제는 원-달러 환율 변환기 역할을 하는 React App을 만들어 보는 과제입니다.
아래 미션 소개 섹션에 안내되어 있는 순서에 따라 진행하세요

미션 소개

사용자가 한 화폐의 단위(원 또는 달러)의 금액을 입력하면,
사전에 정의된 환율을 사용해 다른 화폐 단위로 변환된 금액을 동시에 보여주는 환율 변환기를 만듭니다.

• 사용자가 원화를 입력하면 입력된 원화를 달러로도 변환해 표시합니다.
• 사용자가 달러를 입력하면 입력된 달러를 원화로도 변환해 표시합니다.

새로운 React App을 생성하거나 기존 React App을 재 사용하여 다음 요구사항을 만족하는 환율변환기를 만드세요

• 환율은 자유롭게 설정해주세요 (예제에 사용된 환율은 1300원입니다)
• 환율을 입력하는 input 태그는 CurrenyInput 이라는 별도의 컴포넌트로 분리하세요

답안

const CurrenyInput = ({ value, onChange, currencyUnit }) => {
  return (
    <>
      <div className="input__box">
        <label htmlFor={currencyUnit}>{currencyUnit}</label>
        <input
          type="number"
          id={currencyUnit}
          min={0}
          value={value}
          onChange={(e) => onChange(currencyUnit, e.target.value)}
        />
      </div>
    </>
  );
};

const EXCHANGE_RATE = 1353;

function App() {
  const [state, setState] = useState({
    krw: 0,
    usd: 0,
  });

  const onChange = (currencyUnit, value) => {
    if (currencyUnit === "krw") {
      setState({
        ...state,
        krw: value,
        usd: value / EXCHANGE_RATE,
      });
    }

    if (currencyUnit === "usd") {
      setState({
        ...state,
        krw: value * EXCHANGE_RATE,
        usd: value,
      });
    }
  };

  return (
    <div className="app">
      <h1>환율 변환기 (KRW-USD)</h1>
      <CurrenyInput onChange={onChange} currencyUnit="krw" value={state.krw} />
      <CurrenyInput onChange={onChange} currencyUnit="usd" value={state.usd} />
    </div>
  );
}

export default App;