useRef

• DOM요소에 접근할 수 있도록 하는 Hook.
• ref는 레퍼런스reference  참조의미
• ⭐ref 값은 컴포넌트가 계속해서 렌더링이 되어도, unmount되기전까지 값을 유지함

 

사용방법

기본적인 훅이라 import에 추가만 해주면 됨 

const ref = useRef('초기값')

// 값 가져오기
ref.current

// 값 변경하기
ref.current = '변경값'

사용 용도

1. 저장공간으로써 사용이 된다
   state와 비슷한 역할을 함.
   하지만 ref에 저장한 값은 렌더링을 일으키지 않는다.
   ref는 리렌더링을 발생시키지 않는 값을 저장할 때 사용
2. DOM 요소
   렌더링 되자마자 특정 input이 focusing되는 경우

 

DOM 접근해보기 예제
input태그 안에 ref라는 속성이 있음
이 속성에 변수를 넣어주기만 하면 연결이 됨

const idRef = useRef('')
const [id, setId] = useState('')
useEffect(()=>{
  idRef.current.focus()
}, []);
/* useEffect(()=>{
  if(id.length >= 10) {
    pwRef.current.focus()
  }
}, [id]); */

return(
...
<input value={id} onChange={(event) => {
  setId(event.target.value)

  // 리액트에서 state를 업데이트 하는 방식이 배치 업데이트.
  // 모아서 한번에 반영하기때문에 반영이 한박자 늦어서 이러한 방식으로 개발하면 곤란해지는 상황이 생기기도 함
  if(id.length >= 10) {pwRef.current.focus()}
}} type="text" ref={idRef} />