소스:

https://github.dev/braverokmc79/react-investmement

import React, { useState } from "react";
import classes from "./UserInput.module.css";

export type UserInputType = {
  currentSavings: number;
  yearlyContribution: number;
  expectedReturn: number;
  duration: number;
};

const initialUserInput: UserInputType = {
  currentSavings: 10000,
  yearlyContribution: 1200,
  expectedReturn: 7,
  duration: 10,
};

interface UserInputProps {
  onCalculate: (userInput: UserInputType) => void;
}

const UserInput: React.FC<UserInputProps> = (props) => {
  const [userInput, setUserInput] = useState<UserInputType>(initialUserInput);

  const submitHandler = (event: React.FormEvent) => {
    event.preventDefault();
    props.onCalculate(userInput);

  };

  const resetHandler = () => {
    setUserInput(initialUserInput);
  };

  const inputChangeHandler = (input: keyof UserInputType, value: string) => {
    //inputChangeHandler 함수에서 입력 값을 숫자로 변환(+value)하도록 했습니다. 
    //이는 입력된 문자열 값을 숫자로 변환하여 userInput 상태에 저장합니다.
    setUserInput((prevInput) => {
      return { ...prevInput, [input]: +value };
    });
  };

  return (
    <form onSubmit={submitHandler} className={classes.form}>
      <div className={classes['input-group']}>
        <p>
          <label htmlFor="current-savings">현재 저축액 ($)</label>
          <input
            onChange={(event) =>
              inputChangeHandler("currentSavings", event.target.value)
            }
            type="number"
            id="current-savings"
            value={userInput.currentSavings}
          />
        </p>
        <p>
          <label htmlFor="yearly-contribution">연간 저축액 ($)</label>
          <input
            onChange={(event) =>
              inputChangeHandler("yearlyContribution", event.target.value)
            }
            type="number"
            id="yearly-contribution"
            value={userInput.yearlyContribution}
          />
        </p>
      </div>
      <div className={classes['input-group']}>
        <p>
          <label htmlFor="expected-return">예상 이자율 (연간 %)</label>
          <input
            onChange={(event) =>
              inputChangeHandler("expectedReturn", event.target.value)
            }
            type="number"
            id="expected-return"
            value={userInput.expectedReturn}
          />
        </p>
        <p>
          <label htmlFor="duration">투자 기간 (년)</label>
          <input
            onChange={(event) =>
              inputChangeHandler("duration", event.target.value)
            }
            type="number"
            id="duration"
            value={userInput.duration}
          />
        </p>
      </div>
      <p className={classes.actions}>
        <button onClick={resetHandler} type="reset" className={classes.buttonAlt}>
          초기화
        </button>
        <button type="submit" className={classes.button}>
          계산
        </button>
      </p>
    </form>
  );
};

export default UserInput;

이 코드는 React로 작성된 사용자 입력 폼 컴포넌트입니다. 이 컴포넌트는 사용자가 재무 계산에 필요한 입력 값을 제공할 수 있도록 합니다.

코드의 주요 부분과 동작을 아래에 설명합니다.

주요 컴포넌트 및 기능

1. 1.UserInputType:

   • UserInputType는 사용자의 입력 값을 정의하는 타입입니다. 입력 값으로는 현재 저축액, 연간 저축액, 예상 연간 이자율, 투자 기간이 있습니다.

export type UserInputType = {
  currentSavings: number;
  yearlyContribution: number;
  expectedReturn: number;
  duration: number;
};

2.initialUserInput:

• initialUserInput는 사용자 입력의 초기 값을 정의합니다.

const initialUserInput: UserInputType = {
  currentSavings: 10000,
  yearlyContribution: 1200,
  expectedReturn: 7,
  duration: 10,
};

3.UserInputProps:

• UserInputProps는 컴포넌트가 받을 수 있는 props의 타입을 정의합니다. 여기서는 계산을 위한 onCalculate 함수가 포함됩니다.

interface UserInputProps {
  onCalculate: (userInput: UserInputType) => void;
};

4.UserInput 컴포넌트:

• UserInput는 상태를 관리하고 사용자 입력을 처리하는 함수형 컴포넌트입니다

const UserInput: React.FC<UserInputProps> = (props) => {
  const [userInput, setUserInput] = useState<UserInputType>(initialUserInput);

5.submitHandler:

• submitHandler는 폼이 제출될 때 호출되는 함수로, 폼 제출을 막고 onCalculate 함수에 현재 사용자 입력 값을 전달합니다.

const submitHandler = (event: React.FormEvent) => {
  event.preventDefault();
  props.onCalculate(userInput);
};

6.resetHandler:

• resetHandler는 초기 입력 값으로 폼을 재설정하는 함수입니다.

const resetHandler = () => {
  setUserInput(initialUserInput);
};

7.inputChangeHandler:

• inputChangeHandler는 입력 값이 변경될 때 호출되며, 입력된 값을 숫자로 변환하여 상태를 업데이트합니다.

const inputChangeHandler = (input: keyof UserInputType, value: string) => {
  setUserInput((prevInput) => {
    return { ...prevInput, [input]: +value };
  });
};

8.폼 구성:

• JSX를 사용하여 폼의 구조를 정의합니다. 각각의 입력 필드는 inputChangeHandler를 사용하여 상태를 업데이트합니다.

return (
  <form onSubmit={submitHandler} className={classes.form}>
    <div className={classes['input-group']}>
      <p>
        <label htmlFor="current-savings">현재 저축액 ($)</label>
        <input
          onChange={(event) =>
            inputChangeHandler("currentSavings", event.target.value)
          }
          type="number"
          id="current-savings"
          value={userInput.currentSavings}
        />
      </p>
      <p>
        <label htmlFor="yearly-contribution">연간 저축액 ($)</label>
        <input
          onChange={(event) =>
            inputChangeHandler("yearlyContribution", event.target.value)
          }
          type="number"
          id="yearly-contribution"
          value={userInput.yearlyContribution}
        />
      </p>
    </div>
    <div className={classes['input-group']}>
      <p>
        <label htmlFor="expected-return">예상 이자율 (연간 %)</label>
        <input
          onChange={(event) =>
            inputChangeHandler("expectedReturn", event.target.value)
          }
          type="number"
          id="expected-return"
          value={userInput.expectedReturn}
        />
      </p>
      <p>
        <label htmlFor="duration">투자 기간 (년)</label>
        <input
          onChange={(event) =>
            inputChangeHandler("duration", event.target.value)
          }
          type="number"
          id="duration"
          value={userInput.duration}
        />
      </p>
    </div>
    <p className={classes.actions}>
      <button onClick={resetHandler} type="reset" className={classes.buttonAlt}>
        초기화
      </button>
      <button type="submit" className={classes.button}>
        계산
      </button>
    </p>
  </form>
);

이 컴포넌트는 사용자가 입력한 데이터를 실시간으로 반영하고, 폼 제출 시 해당 데이터를 부모 컴포넌트로 전달합니다. 초기화 버튼을 누르면 폼의 값을 초기 값으로 재설정합니다.