🧡 useRef란

• DOM 요소에 접근할 수 있도록 하는 React Hook
• JS에서의 DOM 요소 접근
  • (1) gerElementById 이용
    const divTag = document.getElementById('#myDiv')
  • (2) querySelector 이용
    const divTag2 = document.querySelector('#myDiv')

import React, { useRef } from 'react'

function App() {
  const ref = useRef('초기값')
  console.log('ref : ', ref)

  
  ref.current = '변경값';
  console.log("ref2 : ", ref)

  return <div>App</div>

}

export default App

• current 값 변경 가능
• ⭐ ref값은 컴포넌트가 계속해서 렌더링 되어도 unmount 전까지 값을 유지한다.
  
  

---

💙 저장공간으로서의 useRef

• state와 비슷한 역할을 한다.
  • state는 변화가 일어나면 다시 렌더링이 일어다고, 내부 변수들은 초기화가 된다.
• ref에 저장한 값은 렌더링을 일으키지 않는다
  • ref의 값 변화가 일어나도 렌더링으로 인해 내부 변수들이 초기화 되는 것을 막을 수 있다.
• 컴포넌트가 100번 렌더링이 되더라도 ref에 저장한 값은 유지된다.

• state : 리렌더링이 꼭 필요한 값을 다룰 대 사용
• ref : 리렌더링을 발생시키지 않는 값을 저장할 대 사용

count 버튼으로 확인 해 보기

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

const style = {
  border: "1px solid black",
  margin: "10px",
  padding: "10px",
}

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

  const plusStateCountButtonHandler = () => {
    setCount(count + 1)
  }

  const plusRefCountButtonHandler = () => {
    countRef.current++
  }

  return (
    <>
      <div style={style}>
        state 영역입니다. {count} <br />
        <button onClick={plusStateCountButtonHandler}>state 증가</button>
      </div>
      <div style={style}>
        ref 영역입니다. {countRef.current} <br />
        <button onClick={plusRefCountButtonHandler}>ref 증가</button>
      </div>
    </>
  )

}

export default App

---

💙 DOM요소 접근 방법으로서의 useRef

• 렌더링 되자 마자 특정 innput 이 focusing 돼야 한다면 useRef를 사용하면 된다.

input으로 확인 해 보기

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

function App() {

  const idRef = useRef('')

//화면이 렌더링 될 때, 어떤 작업을 하고 싶다 : useEffect
useEffect(() => {

  //input 태그를 지칭한것
  idRef.current.focus();
}, [])

  return (
    <>
      <div>
        아이디 : <input type='text' ref={idRef}/>
      </div>
      <div>
      비밀번호   : <input type='password'/>
      </div>
    </>
  )
}

export default App

---