React 컴포넌트 분리와 연동된 state 업데이트

원-달러 환율 변환기를 구현했다.
사용자가 한 화폐 단위의 금액을 입력하면, 사전에 정의된 환율을 사용해 다른 화폐 단위로 변환된 금액을 동시에 보여준다.

구현 과정

컴포넌트 분리

입력 필드를 재사용 가능한 CurrencyInput 컴포넌트로 분리한다.

const CurrencyInput = ({ 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>
  );
};

• currencyUnit: 화폐 단위(krw 또는 usd)를 받아 라벨과 id로 사용한다.
• value: 현재 입력값을 props로 받아 표시한다.
• onChange: 입력값이 변경될 때 화폐 단위와 함께 부모 컴포넌트로 전달한다.

 

state 관리

원화와 달러 값을 하나의 객체로 관리한다.

const EXCHANGE_RATE = 1353;

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

• EXCHANGE_RATE: 환율을 상수로 정의한다.
• state: 원화(krw)와 달러(usd) 값을 객체로 관리한다.

 

환율 변환 로직

입력된 화폐 단위에 따라 다른 화폐로 자동 변환한다.

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,
    });
  }
};

• 원화 입력 시: 입력값을 환율로 나눠 달러로 변환한다.
• 달러 입력 시: 입력값에 환율을 곱해 원화로 변환한다.

 

컴포넌트 렌더링

두 개의 CurrencyInput 컴포넌트를 렌더링하고 각각 다른 화폐 단위를 전달한다.

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

 

 

정리

• 재사용 가능한 컴포넌트는 props로 동작을 제어할 수 있도록 설계한다.
• 연관된 여러 값은 객체로 묶어 하나의 state로 관리하면 효율적이다.
• 하나의 입력값 변경 시 연관된 다른 값도 함께 계산해 업데이트할 수 있다.
• currencyUnit 같은 식별자를 활용하면 동일한 핸들러로 여러 입력을 처리할 수 있다.