[React] - useRef Hook

useRef란?

그동안 useEffect, useState로만 앱을 만들었지만, 이제 조금 더 깊이 공부하기위해 useRef에 대해서 알아보기로 하자

2가지 기능에 대해서 알아보자!

(일단, useState와 변수의 장점을 모아놓은 거라고 들었음)

---

💡 useRef 기능

1) 저장공간

• 단순 저장 -> ui에 보여 줄 필요가 없는 애들

• 변수와의 차이점 :
  useState에 의해 한번 리렌더링 되면 변수는 값이 날라가버리지만,
  useRef를 쓰면 리렌더링이 되어도 ui에 보여주지도 않고 + 값이 유지가 됨

ex) 검색기능 -> 같은 검색어를 또 입력했을 때

---

✏️Note

전에 만들었던 영화커뮤니티 프로젝트 cinebite에서 검색기능을 구현했던 적이 있다. 이때 나는 useRef를 사용할 생각을 못하고 그냥 그 검색어가 DB에 이미 있으면 저장하지말아라~ 이렇게 코드를 짰었는데, 다시 리팩토링해봐야겠다!!!!!

---

2) DOM 요소 선택 -> current 속성을 통해 DOM 요소에 접근

const inputEl = useRef(null);
<input type="text" ref={inputEl} >
<button onClick={()=>inputEl.current.focus()}>검색</button>

ref={inputEl}이런식으로 DOM요소를 선택하는 기능도 있다!

useRef 훅을 사용할 때

console.log(inputEl.current);
// 현재 참조하고 있는 DOM 요소를 출력

ref 객체의 current 프로퍼티를 통해 실제 DOM 요소나 값을 참조하는 것