[React] useRef

 

 

음식 주문 앱 마지막 포스팅입니다..(아마도)

오늘 할 일은 사용자가 메뉴 수량을 선택하고 Add 버튼을 누르면 카트에 메뉴의 수량이 전달될 수 있도록

useRef를 사용하고 수량을 받는 input 요소에 ref를 다는 것이다. 그럼 레쯔고!!🙌

 

useRef 무엇일까

const ref = useRef(initialValue)

useRef를 호출하면 {current: value} 이렇게 생긴 객체를 반환한다.

이 ref 객체는 state처럼 값을 저장하는 저장공간으로 사용된다.

state와 가장 다른 점은 ref의 값이 바뀌어도 컴포넌트가 재렌더링되지 않고,

재렌더링더라도 ref에 저장된 값이 사라지지 않는다는 점이다.

 

따라서 재렌더링되더라도 값을 보존해야 할 때,

또는 값의 변화로 인한 너무 잦은 재렌더링을 방지할 때 아주 유용하게 사용할 수 있다!

useRef의 전달인자 initialValue로 ref.current의 초기값을 설정한다.

 

useRedf는 DOM요소에 접근하는 데도 사용할수 있다.

예를 들어 페이지에 진입했을 때 자동으로 input에 focus 되도록 할 수 있다.

 

useRef 사용하기

음식 주문 앱 메인 페이지 input란에서 메뉴 수량을 선택하고 Add버튼을 누르면 수량을 받아와야 한다.

이때 useRef를 사용하면 input요소에 접근해서 값을 받아오고 저장할 수 있다.

import { useContext, useRef, useState } from "react";

const MealItemForm = (props) => {
  const amountInputRef = useRef(); //useRef를 호출한다. 초기값은 비워져있다.
  const submitHandler = (event) => {
    event.preventDefault();
    const enteredAmount = amountInputRef.current.value; //ref의 현재값을 받아온다.
    (중략)
  };
  
  return (
    <form className={classes.form} onSubmit={submitHandler}>
      <Input
        ref={amountInputRef} //Input 컴포넌트에 prop으로 전달
        label="Amount"
        input={{
          id: "amount_" + props.id,
          type: "number",
          min: "1",
          max: "5",
          step: "1",
          defaultValue: "1",
        }}
      />
      <button>+ Add</button>

Input 컴포넌트는 진짜 input 요소가 아니라 컴포넌트다.

따라서 자식 컴포넌트에 ref를 넘겨주는 메서드인 React.forwardRef를 사용한다.

const Input = React.forwardRef((props, ref) => {
  return (
    <div className={classes.input}>
      <label htmlFor={props.input.id}>{props.label}</label>
      <input ref={ref} {...props.input} /> //prop으로 받아서 넣어준다
    </div>
  );
});

이처럼 Input 컴포넌트에서 React.forwardRef의 전달인자로 컴포넌트 전체를 넣어주면 된다.

부모 컴포넌트에서 prop으로 받은 ref를 진짜 input 요소에 ref 속성으로 넣어주면 끝!

이렇게 간단하지만 쓸모있는 useRef에 관해서도 알아보았다!