[React] useRef로 특정 DOM 선택하기

자바스크립트를 사용할 땐, 특정 DOM을 선택해야 하는 상황에서 getElementById, querySelector과 같은 DOM Selector 함수를 사용해서 DOM을 선택한다.

리액트를 사용하는 프로젝트에서도 가끔 DOM을 직접 선택해야 하는 상황이 발생할때가 있다.

• 예시 특정 엘리먼트의 크기 가져오기 스크롤바 위치를 가져오거나 설정하기 포커스 설정하기 등 video.js, JWPlayer과 같은 HTML5 Video 관련 라이브러리 등 외부 라이브러리를 사용할때도 특정 DOM에 적용하기 때문에 DOM을 선택해야 하는 상황이 발생할 수 있다.
  

이럴 때, 리액트에선 ref를 사용한다.

useRef

→ 컴포넌트에서 특정 DOM 을 선택해야 할 때, 사용한다.

함수형 컴포넌트에서 ref를 사용할땐 useRef라는 Hook함수를 사용한다.

• 클래스형 컴포넌트에선 콜백함수나 React.createRef라는 함수를 사용함.

****초기화 버튼을 클릭했을 때, 이름 input에 포커스가 잡히도록 useRef를 사용하여 기능구현.**

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; // 우선 e.target 에서 name 과 value 를 추출
    setInputs({
      ...inputs, // 기존의 input 객체를 복사한 뒤
      [name]: value // 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;

useRef()를 사용해 Ref 객체를 만들고, 이 객체를 내가 선택하고 싶은 DOM에 ref값으로 설정해줘야 한다.

그럼 Ref객체의 .current값은 내가 원하는 DOM을 가르키게 된다.