React - 특정 DOM 선택하기(useRef)

DOM을 가져올 때 React에서 사용하는 법

(getElementById / querySelector 같이)

 

함수형 컴포넌트에서 하는 방식

이전에 만든 컴포넌트에서 초기화 버튼을 누른 뒤에 초기화를 하고 나서 포커스가 초기화 버튼으로 가 있다.

-> React에서는 실행 뒤 포커스를 이름부분의 input쪽에 옮기거나 하는 기능이 없다.

=> DOM에 직접 접근해야함

 

DOM에 직접 접근하기

1. useRef 불러오기

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

2. useRef() 선언 - 이전 코드에 nameInput 변수 추가

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

3. JSX코드에 ref 추가

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

4. onReset 함수 사용 뒤에 포커스 주기위해 코드 삽입

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

 

5. 결과

초기화 이후에 포커스가 이름에 가게 된다!