React- useRef 로 특정 DOM 선택하기

※ 강의를 듣고 제가 이해한 것을 바탕으로 정리한 것이라서 오류가 있을 수 있습니다.

 

useRef 로 특정 DOM 선택하기

리액트에서 특정 DOM을 선택해야 될 때에는 ref를 사용하면 된다.

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

 

2020/08/30 - [개발 공부한 내용 정리/React] - React- 여러개의 Input 상태 관리하기

React- 여러개의 Input 상태 관리하기

이전 포스트에서 만든 InputSample 에서는 초기화 버튼을 누르면 포커스가 초기화 버튼에 그대로 남아있었는데 한번 초기화 버튼을 클릭했을 때 이름 input 에 포커스가 잡히도록 useRef 를 사용하여 기능을 구현하는 방법을 써보겠다.

 

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 = () => {
    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 을 가르키게 된다.

위 코드에서는 onReset 함수에서 input 에 포커스를 하는 focus() DOM API 를 호출해주어야한다.

이제 브라우저에서 인풋에 값을 입력한 다음에 초기화를 눌러보면 이름 Input에 포커스가 잡힐 것이다.