useRef로 특정 DOM 선택하기

자바스크립트에서 특정 dom을 선택할때
documnet.getElementById() 또는 document.querySelector() 와 같은 함수를 사용해서 Dom을 선택합니다.

리액트 사용 시에도 Dom을 직접 선택해야 하는 상황이 발생하는데, 예를들어서 특정 element의 크기 또는 스크롤바 위치 등을 가져와야 할 때가 있습니다.

이때 사용하는것이 ref 입니다.

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

inputSample에서 초기화 버튼을 누르면 input에 focus가 잡히도록 기능을 구현해보겠습니다.

inputSample.js

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

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

  const { name, nickname } = inputs; // 비구조화 할당을 통해 값 추출 (변수name과 nickname에 객체 input의 속성값인 name,nickname을 집어넣음)

  const nameInput = useRef();

  const onChange = (e) => {
      console.log(e.target);
    const { value, name } = e.target; // 위와 마찬가지로 e.target(onchange 이벤트를 하는 input)의 속성값을 value와 name이라는 새로운 변수에 넣음
    console.log(value);
    console.log(name); 
    console.log(inputs);
    setInputs({
      ...inputs, // 기존의 input 객체를 복사한 뒤
      [name]:value 
      // 객체의 속성값에 값을 할당할때 동적인 키값으로 값을 할당할때 대괄호를 써줌
      //input의 name이라는 속성값에 value값을 집어넣음
      //name : 'value'가 되는것
    });
  };

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

  };


  return (
    <div>
      <input name="name" placeholder="이름" onChange={onChange} value={name} />
      <input name="nickname" placeholder="닉네임" onChange={onChange} value={nickname}/>
      <button onClick={onReset}>초기화</button>
      <div>
        <b>값: </b>
        {name} ({nickname})
      </div>
    </div>
  );
}

export default InputSample;

동작 방식

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

상단에 useRef()를 임포트시킵니다.

const nameInput = useRef();

이후 nameInput을 ref값으로 설정 해준다음

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

  };

onReset 함수(이벤트)에 현재(current) dom에 focus명령을 넣어줍니다.