154. Refs 및 Forward Refs 작업하기

Ref 복습을 하자면

 

이번 화면에서는 주문하고자 하는 양을 입력하면 submit 즉 버튼을 클릭해서 form을 제출했을 때 iput 태그에 입력된 값을 가져오는 것이다. 이때 ref를 이용할 수 있는데 

MealItemForm.js 에 들어간다 

import { useRef } from 'react';

 

값을 받아오려는 컴포넌트인 Input.js에 가서 아래와 같이 React.forwardRef() 를 이용해 감싸준다

import styles from './Input.module.css';
import React from 'react';

const Input = React.forwardRef((props, ref) => {
  return <div className={styles.input}>
    <label htmlFor={props.input.id}>{props.label} </label>
    <input id={props.input.id} {...props.input} type="text" />
  </div>
});

export default Input;

 

이렇게하면 form이 제출될 때마다 context가 trigger 된다 

 

 

 

그리고 값을 받을 때는 아래와 같이 current를 이용해서 받아야 한다.

const enteredAmount = amountInputRef.current.value;

 

value 속성은 input type 내에 number로 지정되어 있다고 한들 항상 'string'이다

const eneteredAmountNumber = +enteredAmount;

글자로 변환

---

왜 자꾸 value 관련 에러가 뜨나 했더니 
Input.js 에서 ref={ref} 코드를 작성하지 않아서 발생한 에러였다

 <input ref={ref} id={props.input.id} {...props.input} />