useRef

javascript를 사용할 때 특정 DOM에 접근해서 변경하고 싶다면queryselector이나 getElementId를 활용합니다. react에서는 이런 기능을 useRef로 할 수 있습니다.

useRef 예시

import { useRef } from "react";

export default function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    inputEl.current.focus();
  };
  return (
    <>
      <Wrapper>
        <Input ref={inputEl} type="text" />
        <button onClick={onButtonClick}>Focus the input</button>
      </Wrapper>
    </>
  );
}

우리가 어떤 페이지에 들어갔을 때 input에 포커스 되어야하는 경우가 있는데 이럴때 위 예시처럼 useRef를 활용합니다.

한가지 예시를 더 볼까요?

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

export default 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>
    </>
  )
}

원래라면 useState에 넣어 input창에 ohChang event가 일어날 때마다 리렌더가 되었겠지만, useState를 활용하면 화면을 처음 받아올 때와 제출 버튼을 눌렀을 때만 rendring이 일어납니다.

useRef는 이외에도 사용법이 많지만 기억할 건 특정 DOM에 접근해서 변경하고 싶을때!, onChange event시 리렌더가 계속 될 필요가 없을 때! 사용해야겠네요.