useRef React hook이 유용하고, 어떻게 사용하는지 알아보십시오!

때때로 내가 사용하는 하나의 React hook은 useRef입니다.

import React, { useRef } from 'react'

이 훅을 통해 우리는 필수적으로 DOM 요소에 액세스 할 수 있습니다.

다음은 콘솔에 카운트 값이 포함 된 span 요소의 DOM 참조 값을 기록하는 예입니다.

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

const Counter = () => {
  const [count, setCount] = useState(0)
  const counterEl = useRef(null)

  const increment = () => {
    setCount(count + 1)
    console.log(counterEl)
  }

  return (
    <>
      Count: <span ref={counterEl}>{count}</span>
      <button onClick={increment}>+</button>
    </>
  )
}

ReactDOM.render(<Counter />, document.getElementById('app'))

const counterEl = useRef (null) 라인과 <span ref = {counterEl}> {count} </ span>에 주목하십시오. 

이것은 링크를 설정하는 것입니다.

이제 counterEl.current에 액세스하여 DOM 참조에 액세스 할 수 있습니다.