useRef란?

useRef는 querySelector 또는 getElementById 처럼 HTML element를 catch하는데 사용하는 느낌이다.

const Element = useRef();
return Element

ref={"Hook Function"}

위 세 개의 코드를 통해 HTML Element 중 내가 원하는 element를 불러온다. 간단하게 useClick 함수가 실행되면서 useRef()를 통해 element를 불러오고 그 다음에 함수 처리를 한다음 element를 돌려준다. HTML Code에서는 useClick()을 통해 element를 함수 처리한다.

사실 적으면서도 useRef()의 감 정도 잡은 것 같다. 실제 코드에 적용하는 것과는 아예 다르니 한 번 queryselector를 적용했던 코드들을 바꿔보는 것이 좋을 것 같다.

사실 프로젝트를 진행하면서 useRef를 사용해보지는 않아서 잘 모르는 부분이 있다. 여기 부분과 관련해서는 코드 예시를 하나 보면서 진행하겠다. 우클릭 후 새탭에서 이미지 열기 하면 보기 쉽다.