객체 타입의 prop 전개연산자로 전달하기

자식 컴포넌트에 prop 을 객체로 전달 한 경우
자식 컴포넌트에서 해당 객체를 전개연산자로 받을 수 있다.

예)

부모컴포넌트에서 Input 이라는 자식컴포넌트의 input prop 에 값으로 객체를 전달함

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>

   )

 

 

자식컴포넌트 Input에서 <input {...props.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;

 

아래와 같음

     <label htmlFor={props.input.id}>{props.label} </label>     
     <input
       id = {props.input.id}
       type = {props.input.type}
       min = {props.input.min}
       max = {props.input.max}
       step = {props.input.step}
       defaultValue = {props.input.defaultValue}
       />