[Hooks API Reference] useRef

언제 사용되는가?

1. DOM 에 접근할 때

2. 값을 바꿔도 리랜더링이 되지 않게 하고싶을 때 (useState는 값이 바뀌면 리랜더링되는 것과 반대)

 

Syntax

const refContainer = useRef(initialValue);

 

정의

useRef는 .current 프로퍼티가 전달된 인자로 초기화되는 가변 참조 개체(mutable ref object)를 반환한다.
반환된 개체는 컴포넌트의 전체 수명 동안 유지된다.

 

사용

일반적인 사용 케이스는 자식에게 필수적으로 액세스하는 것이다.

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    // 'current'는 탑재된 input 요소를 가리킨다.
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

 

특징

기본적으로 useRef는 .current 프로퍼티에 가변 값을 저장할 수 있는 "박스"와 같다.

 

주로 DOM에 액세스하는 방법으로 ref에 익숙할 수 있다. (사용방법1)

ref 객체를 <div ref={myRef}/>와 함께 React로 전달하면, React는 노드가 변경될 때마다 상응하는 DOM 노드의 .current 프로퍼티를 설정한다. (사용방법2)

 

ref 속성을 사용하는 것보다 더 유용하다.

useRef() 는 클래스에서 인스턴스 필드를 사용하는 방법과 유사한 변경 가능한 값을 유지하는 데 유용하다.

useRef()는 평범한 자바스크립트 객체를 만들어 내기 때문이다.

useRef()와 { current: ... }객체 를 만들어 내는것 사이의 유일한 차이점은 useRef는 모든 랜더에서 동일한 참조 객체를 제공해 준다는 것이다.

 

useRef는 내용이 변경 될 때 변경 되었다는 것을 알려주지 않는다는 것에 명심해야한다.

.current 프로퍼티 값을 바꿔도 리랜더링 되지 않는다.

React가 ref를 DOM 노드에 연결하거나 분리할 때 일부 코드를 실행하려면, 콜백 ref를 대신 사용할 수 있다.

 

 

 

참고

useRef()

Ref와 DOM

벨로퍼트 useRef로 특정 DOM 선택하기

useRef() 는 언제 사용하는가?

---