useRef 로 특정 DOM 선택하기

useRef

• Javascript 에서 특정 DOM을 선택하는 방법: DOM Selector 함수 - getElementById, querySelector
• 리액트에서 특정 DOM 을 선택하는 방법: ref
  • 함수형 컴포넌트에서 ref 를 사용할 때에는 useRef 라는 Hook 함수를 사용한다.

리액트에서 DOM을 직접 선택해야 하는 경우

• 특정 엘리먼트의 크기를 가져와야 하는 경우
• 스크롤바 위치를 가져오거나 설정해야 하는 경우
• 포커스를 설정해줘야 하는 경우
• Video.js, JWPlayer 같은 HTML5 Video 관련 라이브러리
• D3, chart.js 같은 그래프 관련 라이브러리
• 위와 같은 외부 라이브러리를 사용해야 하는 경우

 

포커스 설정

이전에 만들었던 InputSample.js 에서는 초기화 버튼을 누르면 포커스가 초기화 버튼에 그대로 남아있었다.

이번에는 초기화 버튼을 클릭했을 때 이름 input에 포커스가 잡히도록 useRef 를 사용하여 구현해보자.

 

useRef 로 Ref 객체 생성

const nameInput = useRef();

 

선택하고 싶은 DOM에 ref 값 설정

<input
    name="name"
    placeholder="이름"
    onChange={onChange}
    value={name}
    ref={nameInput}
/>

Ref 객체의 .current 값은 선택한 DOM을 가리킨다.

여기서 ref 객체(nameInput)는 input 창을 가리킨다.

가리키는 상태에서 focus( ) DOM API 함수를 호출하면 객체가 가리키는 input 창에 포커스가 잡히게 된다.

nameInput.current.focus();

 

InputSample.js

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 = () => {  // 초기화 누르면 input 에 포커스하는 focus( ) DOM API를 호출
    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;