[React Hooks] useRef : 요소값 가져오기

React Hook API에는 useRef라는 API 함수를 제공해준다.

 

javascript를 사용하다보면 선택자를 이용해서 요소의 값을 가져오는 경우가 많다.

 

예를 들어 getElementById, querySelector 를 사용한다.

 

React를 사용할때도 이와같은 요소의 값을 가져오는 경우가 있는데 이럴경우 useRef를 사용하면 된다.

 

 

사용법은 간단하다.

 

import에 useRef를 가져오고,

 

아래와 같이 ReactHook function에 선언을 해주고 return해주는 요소에 ref로 주입해주면 된다.

const useRef = useRef();

return(

<input ref = {useRef} >  useRef테스트  </input>

)

 

• javascript에서 특정 Dom을 선택하는 역할 ex) getElementById, querySelector
• 특정 DOM에 접근할 때 사용한다.
• 외부 라이브러리 사용할때 유용하다.
• 원하는 위치에 ref={} 의 형태로 작성하면 된다.

참고 : https://react.vlpt.us/basic/10-useRef.html