[React] useRef

useState()의 경우 값이 바뀌게 되면 재랜더링 되며 화면이 변경되지만

useRef()는 값이 바뀌어도 재랜더링 되지 않기 때문에 화면이 변경되지 않습니다.

 

그럼 let으로 선언한 변수와 차이점이 없다고 생각할 수 있습니다.

const App = () => {
  const [count, setCount] = useState(0)
  const countRef = useRef(0)
  let counter = 0

  return (
    <div>
    </div>
  )
}

useRef()의 값은 재랜더링 되어도 변경되었던 값을 가지고 있지만 let으로 선언한 변수는 재랜더링 시 값이 초기화 됩니다.

 

let 변수를 컴포넌트 밖에 사용하면 변경한 값을 기억할 수 있습니다.

let counter = 0

const App = () => {
  const [count, setCount] = useState(0)
  const countRef = useRef(0)

  return (
    <div>
    </div>
  )
}

 

 

하지만 useRef()를 사용하면 컴포넌트 별로 값을 관리할 수 있다는 차이점이 있습니다.

 

결론, useRef()는 랜더링이 필요하지 않은 값을 저장할 때 사용됩니다.

ex) api로 받은 데이터를 현재 데이터와 비교할 때 등

const data = useRef(null)

useEffect(() => {
  data.current = { ...data }
}, [])

 

또는 DOM 요소를 조작할 때에도 사용할 수 있습니다.

const App = () => {
  const inputRef = useRef(null)
  
  useEffect(() => {
    inputRef.current.focus()
  }, [])

  return (
    <>
      <input ref={inputRef} type="text" />
    </>
  )
}

 

사용자가 만든 컴포넌트, 커스텀 컴포넌트를 참조하고 싶다면 해당 컴포넌트를 forwardRef를 사용하면 됩니다.

그리고 원하는 DOM 요소에 ref={ref} 속성을 지정해주면 됩니다.

const MyForm = forwardRef((props, ref) => {
  return (
    <form ref={ref}>
      <input type="text" />
    </form>
  )
})

const App = () => {
  const myFormRef = useRef(null)
  
  return(
    <div>
      <MyForm ref={myFormRef} />
    </div>
  )
}