[React Hooks] useRef

리액트에서 특정 DOM 을 선택하기 위해 ref 라는 것을 사용한다.

◇ 함수형 컴포넌트 → useRef 라는 Hook 함수를 사용

◇ 클래스형 컴포넌트 → 콜백 함수 또는 React.createRef 라는 함수 사용

 

import React, { useState } from "react";
 
function InputSample() {
  const [inputs, setInputs] = useState({
    name: "",
    nickname: ""
  });
 
  const { name, nickname } = inputs; //비구조화 할당을 통해 값 추출
 
  const onChange = e => {
    const { name, value } = e.target;
    console.log(name);
    setInputs({
      ...inputs,
      [name]: value
    });
    //객체 상태를 업데이트 할 때는 꼭 기존의 객체를 복사해야된다.
    //inputs[name] = value; <- 직접 수정 안 됨!!!
    //불변성을 지키기 위해서
  };
  //객체 e : input 에서 수정 이벤트가 발생 했을 때 해당 내용을 포함한다.
  //e.target : 이벤트가 발생 한 DOM에 대한 정보를 가지고 있다.
 
  const onReset = () => {
    setInputs({ name: "", nickname: "" });
  };
 
  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, { useState, useRef } from "react";
 
function InputSample() {
  const [inputs, setInputs] = useState({
    name: "",
    nickname: ""
  });
 
  const nameInput = useRef();
 
  const { name, nickname } = inputs; //비구조화 할당을 통해 값 추출
 
  const onChange = e => {
    const { name, value } = e.target;
    console.log(name);
    setInputs({
      ...inputs,
      [name]: value
    });
    //객체 상태를 업데이트 할 때는 꼭 기존의 객체를 복사해야된다.
    //inputs[name] = value; <- 직접 수정 안 됨!!!
    //불변성을 지키기 위해서
  };
  //객체 e : input 에서 수정 이벤트가 발생 했을 때 해당 내용을 포함한다.
  //e.target : 이벤트가 발생 한 DOM에 대한 정보를 가지고 있다.
 
  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;

 

초기화 버튼을 클릭했을 때, 이름 input 에 포커스가 오도록 변경.

​

useRef( ) 를 사용하여 Ref 객체를 만들고, 이 객체를 통하여 포커스를 변경한다.

선택하고 싶은 DOM에 ref 값으로 설정해야 한다.

그러면 Ref 객체의 .current 값은 원하는 DOM을 가리키게 된다.

​

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