2022.09.26.

TIL

Input의 input을 props로 전달했습니다. 전달된 input은 {...props.input} 이런식으로 사용할 수 있습니다.

// 선언
<Input
  label="Amount"
  input={{
    id: 'amount',
    type: 'number',
    min: '1',
    max: '5',
    step: '1',
    defaultValue: '1',
  }}
/>;

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

forwardRef

ref를 props로 넘겨줘야 할때 사용합니다.

const Input = React.forwardRef((props, ref) => {
  return <input ref={ref} {...props.input} />;
});

import { useRef, useState } from 'react';

const MealItemForm = props => {
  const amountInputRef = useRef();

  return (
    <Input
      label="Amount"
      ref={amountInputRef}
      input={{
        id: `amount_${props.id}`,
        type: 'number',
        min: '1',
        max: '5',
        step: '1',
        defaultValue: '1',
      }}
    />
  );
};

Input 컴포넌트에서 MealItemForm 컴포넌트로 ref를 전달했습니다.