# 145 [udemy React 완벽 가이드 노트] Input 컴포넌트에 input 프롭을 객체로 추가하기

Input 이란 컴포넌트를 만들어보자

 

Input 컴포넌트

import classes from "./Input.module.css";

const Input = props => {
  return (
    <div className={classes.input}>
      <label htmlFor={props.input.id}>{props.label}</label>
      <input {...props.input} />
    </div>
  );
};

export default Input;

Input은 내가 만든 컴포넌트이다.

이걸 부모 컴포넌트에서 Input의 프롭을 객체로 받아서

Input컴포넌트에 그대로 전달해 주도록 하자. 

이렇게 하면 Input 컴포넌트를 어디서든 

재사용하기 편리해 진다. 

Input 컴포넌트에 prop을 객체로 input의 prop을 넣기만 하면 

특성이 다른 Input 컴포넌트를 만들수 있게 되는 것이다.

 

객체 그대로 보내주려면 중괄호 두개를 겹쳐 

넣어주기만 하면 된다.

 

MealItemForm 컴포넌트

import Input from "../../UI/Input";
import classes from "./MealItemForm.module.css";

const MealItemForm = props => {
  return (
    <form className={classes.form}>
      <Input
        label="Amount"
       	  input={{
          id: "amount_" + props.id,
          type: "number",
          min: "1",
          max: "5",
          step: "1",
          defaultValue: "1",
        }}
      />
      <button>+ Add</button>
    </form>
  );
};
export default MealItemForm;

 

주의할 점 

 

각 Input 컴포넌트 당 

고유 id를 생성하도록 하자.