[React] useRef

✅ useRef

---

• JavaScript 를 사용 할 때에는, 우리가 특정 DOM 을 선택해야 하는 상황에 getElementById, querySelector 같은 DOM Selector 함수를 사용해서 DOM 을 선택한다.
• 리액트를 사용하는 프로젝트에서도 가끔씩 DOM 을 직접 선택해야 하는 상황이 발생 할 때도 있다.
• 예를 들어서 특정 엘리먼트의 크기를 가져와야 한다던지, 스크롤바 위치를 가져오거나 설정해야된다던지, 또는 포커스를 설정해줘야된다던지 등 다양한 상황이 있다.
• 리액트에서 ref 라는 것을 사용한다.
• 함수형 컴포넌트에서 ref 를 사용 할 때에는 useRef 라는 Hook 함수를 사용한다.

💡 DOM

문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다.

✅ useRef는 언제 사용하는가

---

1️⃣ 컴포넌트에 focus를 위치시킬 필요가 있는 경우

• 예를 들어, 값을 여러개 일력하고 첫 번째 칸으로 이동해야 하는 경우 필요하다.

2️⃣ 속성 값을 초기화(clear)할 필요가 있는 경우

• 예를 들어, 카운터의 값을 0으로 초기화 할 필요가 있을 때

3️⃣ 애니메이션을 직접적으로 실행시킬 때

4️⃣ 서드 파티 DOM 라이브러리를 React와 같이 사용할 때

✅ input 에 포커스가 잡히도록 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 { 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 을 가르킨다.
• 브라우저에서 인풋에 값을 입력한 다음에 초기화를 눌러보면 이름 input 에 포커스를 잡는다.

✅ useRef로 리렌더링 방지

---

• ref를 통해 input 창에 입력되는 state 요소가 변경될때마다 렌더링 작업이 반복되는 것을 막을 수 있다.

📌 useState

import React, { useState } from "react"

function App() {
  const [name, setName] = useState("")
  const [currentName, setCurrentName] = useState("")

  console.log("render")

  return (
    <>
      <input value={name} onChange={e => setName(e.target.value)} />
      <button onClick={() => setCurrentName(name)}>제출</button>
      <div>나의 이름은 {currentName} 입니다.</div>
    </>
  )
}

export default App

• 이름이 입력될때마다 렌더링이 일어난다.

📌 useRef

import React, { useState, useRef } from "react"

function App() {
  const [currentName, setCurrentName] = useState("")
  const inputRef = useRef("")

  console.log("render")

  return (
    <>
      <input ref={inputRef} />
      <button onClick={() => setCurrentName(inputRef.current.value)}>제출</button>
      <div>나의 이름은 {currentName} 입니다.</div>
    </>
  )
}

export default App

• input에서 setName함수를 실행시켜 해당 state값을 변경할 때마다 일어나던 rendering이 아예 사라졌다.

• 화면을 처음 받아올 때와 제출 버튼을 눌렀을 때만 rendring이 일어난다는 것을 알 수 있다.
  
  
  📩 참고 자료

• [짤막글] useRef가 뭔가요?

• useRef 로 특정 DOM 선택하기