[작성 중] useRef에 대한 고찰

 

저장 공간 또는 DOM 요소에 접근하기 위해 사용되는 React Hook입니다. useRef로 관리되는 값은 값이 변해도 화면이 렌더링 되지 않는다는 특징이 있습니다. 또한, 컴포넌트가 종료되기 전까지는 렌더링이 되어도 값을 그대로 유지할 수 있습니다. 주로 변화는 감지해야 하지만 그 변화가 렌더링을 발생시키면 안되는 경우 많이사용합니다.

로그인 시 클릭 하지 않아도 자동으로 입력 폼이 포커스되는 기능이나 무한 스크롤에서 스크롤 이벤트를 감지해서 새롭게 데이터를 불러올 때 사용합니다.

보통 무한 스크롤의 새롭게 이벤트가 일어나는 지점을 관리할 때 사용하고는 합니다.

 

Ref 사용 예시

• 입력 폼 포커스 이벤트

 

 

useRef 사용 예시

• 무한 스크롤의 새롭게 이벤트가 일어나는 지점 관리 

 

useState와 useRef의 차이점

 

useRef는 상태가 업데이트 되어도 페이지가 렌덜이되지 않는다는 점이 가장 큰 차이점이다. 

 

 

 

 

 

---

• [참고] TypeScript React에서 useRef의 3가지 정의와 각각의 적절한 사용법
• [참고] Ref에 대한 고찰 / Ref의 활용과 useRef
• [참고]
• [참고]
• [참고]
• [참고]