8. 특정 DOM을 선택하고 싶을 때에는 useRef로

# JavaScript에서 특정 DOM을 선택할 때에는 getElementById, querySelector 같은 DOM Selector 함수를 사용한다.

​

# 리액트에서는 함수형 컴포넌트의 경우 useRef 라는 Hook 함수를, 클래스형 컴포넌트에서는 React.createRef 라는 함수를 이용한다.

​

# useRef의 기능은 아래 두 가지이다.

(1) 컴포넌트에서 특정 DOM을 선택해야 할 때

(2) 컴포넌트에서 조회 및 수정할 수 있는 변수를 관리할 때 (이 내용은 뒤에서 다룬다!)

 

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

function InputSample() {
  const [inputs, setInputs] = useState({
    name: '',
    nickname: ''
  });
  const nameInput = useRef();

  const { name, nickname } = inputs;

  const onChange = e => {
    const { value, name } = e.target; 
    setInputs({
      ...inputs, 
      [name]: value 
    });
  }; 

  const onReset = () => {
    setInputs({
      name: '',
      nickname: ''
    });
    nameInput.current.focus();
  };

  return (
    <div>
      <input
        name="name"
        placeholder="이름"
        onChange={onChange}
        value={name}
        ref={nameInput}
      />
      <input
        name="nickname"
        placeholder="닉네임"
        onChange={onChange}
        value={nickname}
      />
      <button onClick={onReset}>초기화</button>
      <div>
        <b>값: </b>
        {name} ({nickname})
      </div>
    </div>
  );
}

export default InputSample;

(1) const nameInput = useRef();

(2) ref={nameInput}

​

(1) useRef()로 Ref 객체를 만들고, (2) 이 객체를 우리가 선택하고 싶은 DOM에 ref 값으로 설정해주어야 한다.

→ 이렇게 하면 우리가 원하는 DOM이 Ref 객체의 .current 값이 됨!

---

출처 : https://react.vlpt.us/basic/10-useRef.html

10. useRef 로 특정 DOM 선택하기 · GitBook