React - useRef 특정돔 지정하기

📌 목차

• Introduction
• useRef
• Conclusion

📌 Introduction

안녕하세요. 이번 시간에서는 useRef를 변수같이 사용하는 것이 아닌 document.querySelector와 같은 기능을 하는 react useRef를 만나볼게요.

📌 useRef

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;

    // 객체 상태를 업테이트 할때는 불변성을 지켜줘야 합니다.
    setInputs({
      ...inputs,
      [name]: value,
    });
  };

  const initText = () => {
    setInputs({
      name: "",
      nickname: "",
    });
    // 이렇게 가져올 수 있어요.
    nameInput.current.focus();
  };

  return (
    <div>
      <input
        name="name"
        placeholder="name"
        onChange={onChange}
        value={name}
        // ⭐️여기에서 지정을 해줄 수 있습니다.
        ref={nameInput}
      />
      <input
        name="nickname"
        placeholder="nickname"
        onChange={onChange}
        value={nickname}
      />
      <button onClick={initText}>init</button>
      <div>
        <b>value: </b>
        {name} ({nickname})
      </div>
    </div>
  );
}

export default InputSample;

📌 Conclusion

vue에도 동일한 ref라는 기능이 있지요. 하지만 이번만큼은 react가 좀더 가독성이 높다고 해야할까요. 좀더 편한거 같습니다. vue 경우 this.$refs로 가져오게 되는데 이게 은근히 귀찮은 경우가 있더라구요.하지만 직접 변수에 넣어 사용하는게 좀더 편한거 같습니다.(가독성 측면에서도용) 그럼 다음 포스팅에서 만나용~!