React 와 Ref

Ref란?

다른 DOM 요소를 직접 접근하여 가져온 값을 다룰 수 있게 하는 기능
추천하진 않음 => 절대로 남용하지 말자.

State로 input 엘리먼트 제어

import React, { useState } from 'react';

const AddUser = (props) => {
  const [enteredName, setEnteredName] = useState('');
  
  const usernameChangeHandler = (event) => {
    setEnteredUsername(event.target.value);
  };
  
  const addUserHandler = (event) => {
    event.preventDefault();
    console.log(enteredName);
  }
  
  return (
    <FormContrl>
      <form onSubmit={addUserHandler}>
        <input
          type="text"
		  onChange={usernameChangeHandler}
        />
            ...
  );
};

State로 input의 값을 받아오는 모습이다.

Ref로 input 엘리먼트 제어

import React, { useRef } from 'react';

const AddUser = (props) => {
  const nameInputRef = useRef();
  
  const addUserHandler = (event) => {
    event.preventDefault();
    console.log(nameInputRef.current.value);
  }
  
  return (
    <FormContrl>
      <form onSubmit={addUserHandler}>
        <input
          type="text"
          //ref 설정
          ref={nameInputRef}
        />
            ...
  );
};         

Ref를 사용하여 input 값을 받아오는 모습이다.
const nameInputRef = useRef(); 로 정의만 해두면 State처럼 입력하는 글자 하나하나를 추적하진 못하지만 추후 전송 버튼을 눌렀을 때는 State처럼 input 창 안에 있는 값을 가져올 수 있다.

정리

Ref는 위험한 방법이다. React를 통해서 값을 가져오는게 아니라 직접 그 요소에 접근하는 방법이기 때문이다. input 값을 가져오는 것처럼 새로운 요소를 추가하거나 CSS 클래스를 변셩하지 않은 선에서 가벼운 작업에서는 Ref를 활용하여 불필요한 작업을 줄일 수 있다.

하지만 항상 조심 또 조심해서 쓰자.