[React] useRef

한별·2024년 4월 8일

React useRef

React

목록 보기

6/12

useRef

값을 저장하기 위해 사용
렌더링과 상관없이 값을 계속해서 사용하고 싶을 때
DOM을 핸들링하기 위해서도 많이 사용

사용하는 이유

저장 공간
DOM 선택

저장 공간

🙋‍♂️ 화면에 보여줄 필요가 없는 변수는 그냥 일반 변수로 써도 되지 않나요??
일반 변수를 쓰는 경우, state 변화로 인한 리렌더링 시 변수 값이 초기화 된다.

변수가 13에서 렌더링된 후 1로 바뀐 것을 확인할 수 있다.

이러한 문제점을 해결할 수 있는 것이 useRef이다. 값이 바뀌어도 rerender 되지 않고(화면에 보여줄 필요 X), rerender 되도 값이 유지가 됨.

저장 공간으로 사용하기

const App = () => {
  const countRef = useRef(0); // 초기값 0

  return (
    <div>{countRef.current}</div> // ref는 새로 렌더링 되지 않음
    <button onClick={() => {
  		countRef.current++; // 버튼 클릭 시 ref 값 증가
  	}}>REF 증가</button>
  )
}

DOM 선택

document.getElementById() 같은 함수를 사용하지 않고 ref를 이용해서 dom을 사용 가능함

DOM 선택을 위해 사용하기

const App = () => {
  const inputRef = useRef(null); // 초기값 0

  return (
    <input type='text' ref={inputRef}/> // DOM select
    <button onClick={() => {
  		inputRef.current.focus(); // ref 사용
  	}}>입력창 포커스</button>
  )
}