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

useRef - 특정 DOM 선택

• javascript에서 특정 Dom을 선택하는 역할을 하는 getElementById, querySelector와 같다.
• 원하는 위치에 ref={} 의 형태로 작성하면 된다.
• 포커스를 잡으려면 nameInput.current.focus() 형태로 작성하면 된다.

 

전에 만든 InputSample.js 에서 이름과 닉네임을 초기화하면 이름 input에 포커스가 가도록 설계해봅시다.

// InputSample.js

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

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

  const nameInput = useRef(); // 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 (
    <>
      <input 
      name="name" 
      placeholder="이름" 
      onChange={onChange} 
      value={name} 
      ref={nameInput} // nameInput 함수
      />
      <input 
      name="nickname" 
      placeholder="닉네임" 
      onChange={onChange} 
      value={nickname} 
      />
      <button onClick={onReset}>초기화</button>
      <div>
        <b>값: </b>
        {name} ({nickname})
      </div>
    </>
  );
}

export default InputSample;