useRef란, useRef 사용방법, useRef 사용 예시

 

useRef란?

1. 특정 요소의 DOM 주소값을 가져오는 React Hook이다. 

 

React는 기본적으로 DOM에 직접 접근하는 것을 금지하고 있다.

React는 가상 DOM을 사용해서 SPA를 구현하기 때문에, DOM을 직접 조작하는 것은 React의 작동 방식과도 맞지 않고, 원하는 결과가 나오지 않을 수도 있기 때문이다.

 

그럼에도 DOM에 직접 접근해야하는 예외 상황들이 있다. 바로 DOM 엘리먼트의 주소값을 활용해야 하는 경우로, 가장 대표적인 예시는 특정 요소에 포커스를 설정해야하는 상황이 있다. 이럴 때 useRef를 사용해서 DOM 주소 값을 받아와 사용할 수 있다.

 

하지만 DOM에 직접 접근하는 것은 React의 작동 방식과 맞지 않기 때문에, 이런 예외적인 상황을 제외하고는 useRef를 사용하거나 DOM에 직접 접근해서는 안 된다. 

 

<DOM 엘리먼트의 주소값을 활용해야 하는 경우 예시>

• focus
• text selection
• media playback
• 애니메이션 적용
• d3.js, greensock 등 DOM 기반 라이브러리 활용

 

 

2. DOM을 조작하는 역할 이외에 유저의 입력 값도 받아올 수 있다. 

(여기서 우리는 DOM을 실제로 조작하는 게 아니다. )

 

우리는 새로운 요소를 추가하거나 CSS 클래스를 변경하는게 아니고, 그저 사용자가 입력한 내용을 바꾼 것 뿐이다. 

값을 변경할 필요없이 값만 읽고 싶다면 useRef!!

 

useRef는 코드는 조금 적지만, DOM을 조작한다는 예외적인 일을 해야한다. 

---

useRef 사용하기

 

1. 상단에 useRef import 하기

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

 

2. 변수로 할당해주기

const nameInputRef = useRef(); // 이 ref 값은 항상 객체이고, current 프롭을 가지고 있다.
const ageInputRef = useRef();

 

3.  컴포넌트 안에서 사용하기

 

~.current.value로 인풋 값을 불러올 수 있다. 

const enteredName = nameInputRef.current.value;
const enteredUserAge = ageInputRef.current.value;

 

---

 

useState 사용한 코드

import React, { useState } from 'react';

import Card from '../UI/Card';
import Button from '../UI/Button';
import ErrorModal from '../UI/ErrorModal';
import Wrapper from '../Helpers/Wrapper';
import classes from './AddUser.module.css';

const AddUser = (props) => {
  const [enteredUsername, setEnteredUsername] = useState('');
  const [enteredAge, setEnteredAge] = useState('');
  const [error, setError] = useState();

  const addUserHandler = (event) => {
    event.preventDefault();
    if (enteredUsername.trim().length === 0 || enteredAge.trim().length === 0) {
      setError({
        title: 'Invalid input',
        message: 'Please enter a valid name and age (non-empty values).',
      });
      return;
    }
    if (+enteredAge < 1) {
      setError({
        title: 'Invalid age',
        message: 'Please enter a valid age (> 0).',
      });
      return;
    }
    props.onAddUser(enteredUsername, enteredAge);
    setEnteredUsername('');
    setEnteredAge('');
  };

  const usernameChangeHandler = (event) => {
    setEnteredUsername(event.target.value);
  };

  const ageChangeHandler = (event) => {
    setEnteredAge(event.target.value);
  };

  const errorHandler = () => {
    setError(null);
  };

  return (
    <Wrapper>
      {error && (
        <ErrorModal
          title={error.title}
          message={error.message}
          onConfirm={errorHandler}
        />
      )}
      <Card className={classes.input}>
        <form onSubmit={addUserHandler}>
          <label htmlFor="username">Username</label>
          <input
            id="username"
            type="text"
            value={enteredUsername}
            onChange={usernameChangeHandler}
          />
          <label htmlFor="age">Age (Years)</label>
          <input
            id="age"
            type="number"
            value={enteredAge}
            onChange={ageChangeHandler}
          />
          <Button type="submit">Add User</Button>
        </form>
      </Card>
    </Wrapper>
  );
};

export default AddUser;

 

useRef 사용한 코드

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

import Card from "../UI/Card";
import Button from "../UI/Button";
import ErrorModal from "../UI/ErrorModal";
import Wrapper from "../Helpers/Wrapper";
import classes from "./AddUser.module.css";

const AddUser = (props) => {
  const nameInputRef = useRef(); // 이 ref 값은 항상 객체이고, current 프롭을 가지고 있다.
  const ageInputRef = useRef();

  const [error, setError] = useState();

  const addUserHandler = (event) => {
    event.preventDefault();
    const enteredName = nameInputRef.current.value;
    const enteredUserAge = ageInputRef.current.value;

    if (enteredName.trim().length === 0 || enteredUserAge.trim().length === 0) {
      setError({
        title: "Invalid input",
        message: "Please enter a valid name and age (non-empty values).",
      });
      return;
    }
    if (+enteredUserAge < 1) {
      setError({
        title: "Invalid age",
        message: "Please enter a valid age (> 0).",
      });
      return;
    }
    props.onAddUser(enteredName, enteredUserAge);
    nameInputRef.current.value = "";
    ageInputRef.current.value = "";
  };

  const errorHandler = () => {
    setError(null);
  };

  return (
    <Wrapper>
      {error && (
        <ErrorModal
          title={error.title}
          message={error.message}
          onConfirm={errorHandler}
        />
      )}
      <Card className={classes.input}>
        <form onSubmit={addUserHandler}>
          <label htmlFor='username'>Username</label>
          <input
            id='username'
            type='text'
            ref={nameInputRef} //nameInputRef 안에 들어 있는 것은 나중에 실제 DOM 요소가 될 거다.
          />
          <label htmlFor='age'>Age (Years)</label>
          <input
            id='age'
            type='number'
            ref={ageInputRef} //ageInputRef 안에 들어 있는 것은 나중에 실제 DOM 요소가 될 거다.
          />
          <Button type='submit'>Add User</Button>
        </form>
      </Card>
    </Wrapper>
  );
};

export default AddUser;

 

 

😃 잘못된 개념 전달이 있다면 댓글 부탁드립니다. 저의 성장에 큰 도움이 됩니다🤓