react에서 document.queryselector() 대신 사용하는 방법이 있다? useRef() 에 대해서

react에서는, javascript에서 사용할 수 있는 document.queryselector() 를 사용할 수가 없습니다.

이 부분을 사용하기 위해서는, useRef 라는 react에서 제공해주는 것을 사용하면 해결할 수가 있습니다.

 

코드 )

import { useRef } from 'react'

class Usereference {
	ref1: React.MutableRefObject<any>;
    
    constructor(){
    this.ref1 = useRef();
}

const ReferenceFunction = () => {
	const usingRef = new Usereference().ref1;
    const buttonClicked = () => {
    	console.log(usingRef);
    }

	return (
    	<input type="text" ref={usingRef}/>
        <a onClick={buttonClicked}>클릭</a>
   	)
}

 

일단, 예제를 대충 만들어봤습니다. 그리고 다른 블로그들이나 예제에는 class를 만드는 것이 나와있지 않는데.. 여기서 좀 헤맸습니다.

class를 만들지 않고 하니깐, 아무 값이 들어가지 않게 되더군요.

 

1. useRef 함수를 사용하기 위해서는, import를 해야 사용이 가능합니다.

 

2. class를 만들어야만 useRef에 값이 들어가게 됩니다.

 

3. console.log 함수로 값을 찍어서, 개발자 모드에서 로그로 값들을 볼 수 있으니, document.queryselector에서 사용해야 할 값들을 확인하시고 사용하시면 됩니다.