[React] useRef는 언제 사용하나요?

useRef에서 필요한 상황에 대해서 알아봅시다.

useRef의 특징 두가지가 있습니다. 첫 번째는 리렌더링 하지 않습니다. 두 번째로는 컴포넌트의 속성만 조회&수정 합니다.

 

react에서 useRef를 사용하는 경우는 다음과 같습니다.

 

 

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

- 예를 들어, 값을 여러개를 입력하고 첫 번째 칸으로 이동해야 하는 경우에 필요합니다. 로그인이 실패하고 첫 번째 아이디 칸으로 이동 시키는 경우가 있습니다.

 

import { useState, useRef } from "react"

export default function Test() {
  const [loginForm, setLoginForm] = useState({
    username: "",
    password: "",
  })
  const loginFormRef = useRef()

  const handleSubmit = (e) => {
    e.preventDefault()
    loginFormRef.current.username.focus()
  }

  return (
    <div>
      <form ref={loginFormRef} onSubmit={handleSubmit}>
        <input
          type="text"
          name="username"
          value={loginForm.username}
          onChange={(e) => {
            setLoginForm({
              ...loginForm,
              username: e.target.value,
            })
          }}
        />
        <input
          type="password"
          name="password"
          value={loginForm.password}
          onChange={(e) => {
            setLoginForm({
              ...loginForm,
              password: e.target.value,
            })
          }}
        />
        <button type="submit">Submit</button>
      </form>
    </div>
  )
}

 

 

 

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

- setInterval이나 setTimeout과 같은 함수는 clear 시켜주지 않으면 메모리를 많이 소모하기 때문에 카운터의 값을 0으로 초기화 시키는 경우 사용합니다.

 

// App.js

const RSPfunction = () => {
  const [result, setResult] = useState('');
  const [imgCoord, setImgCoord] = useState(rspCoords.바위);
  const [score, setScore] = useState(0);
  const interval = useRef();

  useEffect(() => { 
    interval.current = setInterval(changeHand, 100);
    return () => {
      clearInterval(interval.current);
    }
  }, [imgCoord]);

 

 

 

3. useRef로 컴포넌트안의 변수 관리하는 경우.

- 컴포넌트의 속성 정보를 Re-Rendering하지 않으면서 조회&수정 할 때

useRef를 활용한 변수는 아래와 같은 곳에 쓰인다.

1. setTimeout, setIntervel 을 통해 만들어진 id

2. scroll의 위치

3. 배열의 새 항목을 추가할 때 필요한 고유한 key

 

import { useRef } from "react"
import UserList from "./UserList"

export default function User() {
  const users = [
    {
      id: 1,
      name: "John",
      age: 20,
    },
    {
      id: 2,
      name: "Jane",
      age: 21,
    },
    {
      id: 3,
      name: "Jack",
      age: 22,
    },
  ]

  const nextId = useRef(4)
  const onCreate = () => {
    nextId.current += 1
  }

  return <UserList users={users} onCreate={onCreate} />
}

 

const nextId = useRef(4) : 배열의 고유값 변수로 nextId를 설정해주고, useRef() 파라미터로 다음 id가 될 숫자 4를 넣어준다.

파라미터 값을 넣어주면 해당 값이 변수의 current값이 된다. 그리고 nextId 변수를 수정하거나 조회하려면 .current 값을 수정하거나 조회한다.

 

 

그 외 useRef를 사용해야 할 경우

1. 포커스, 텍스트 선택영역, 혹은 미디어의 재생을 관리할 때.

2. 애니메이션을 직접적으로 실행시킬 때.

3. 서드파티 DOM 라이브러리를 React와 같이 사용할 때.