useRef

useRef

javascript에서는 특정 DOM을 선택히여 정보를 얻거나 임의로 조작을 할 때, getElementBtId 나 querySelector을 이용하여 DOM을 선택할 수 있었다. React에서는 이 기능을 대체할 수 있는 useRef 훅을 제공한다.

useRef는 크게 2가지로 사용이 된다.
1. DOM에 접근한다.
2. 랜더링을 일의키지 않고 변경을 시킨다.

functon test () {
  	const textRef = useRef()
  
	return ( 
      <div> 
        <input ref={textRef} /> 
        <button onClick={() => textRef.current.focus()}> 
          input에 포커스하기 
        </button> 
      </div> 
	);
}

위에 예시을 보면 useRef로 textRef라는 객체를 생성했다. 그리고 ref라는 속성을 통해서 DOM에 접근했고 DOM API를 사용하여 현재 가르키고 있는 DOM에 focus를 해주고 있다. 이렇게 하면 input에 포커스하기를 클릭했을 때 ref를 통해서 접근이 되어 있는 input에 포커스가 된다.

이것이 첫 번째 DOM 접근하기이다.

const Ref = () => { 
  	const textRef = useRef(null); 
	
  	console.log("rendering"); 
                  
return ( 
  <div> 
  	<input ref={textRef} /> 
  	<button onClick={() => console.log("input 값 : ", textRef.current.value)}> 		값 확인하기 
    </button> 
  </div> 
	); 
};

만약 onChange를 사용했다면 input창에 값을 입을 했을 때 입력을 할 때 마다 리랜더링이 일어났을 것이다. 하지만 uesRef를 이용을 한다면 리랜더링이 일어나지 않는다. 그리고 값을 가져오는 방법으로는 ref.current를 이용하여 DOM접근을 해서 값을 가져올 수 있다.

이것이 두 번째 랜더링을 일으키지 않고 변경을 시키는 것이다.