React Hooks 3 - useRef

 

 

useRef

특정 값을 저장하기 위해 사용하는 대표적인 Hook

리렌더링과 상관없이 값을 기억하기 위해 사용
> 이 특징을 이용해 자바스크립트 DOM API를 직접사용하지 않고 DOM 요소를 다루기 위한 용도로 사용

 

 

사용법

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

...
}
// ref > {current: '초기값'}

 

ref 값 변경

function App() {
  const ref = useRef("초기값");
  console.log("ref 1", ref);

  ref.current = "바꾼 값";
  console.log("ref 2", ref);
  
  ...
  }
  
  // ref 1 > {current: '초기값'}
  // ref 2 ? {current: '바꾼 값'}

 

 

이렇게 설정된 ref 값은 컴포넌트가 계속해서 렌더링 되어도 unmount 전까지 값을 유지

1. 저장공간으로 사용 : state 와 비슷하게 저장공간으로 사용하지만 ref는 리렌더링을 만들지 않음 > 초기화 되지도 않음

2. DOM : 렌더링이 되자마자 input이 Focusing 되야하는 등 DOM 요소를 핸들링해야하는 순간 사용하기 좋음

  useEffect(() => {
    idRef.current.focus();
  }, []);