TIL | useRef, useRef의 특징과 사용법 ...

23.08.25

1. useRef

1-1. useRef란

useRef : React에서 제공하는 Hook의 하나로 원하는 특정 DOM을 직접 선택해서 컨트롤 할 수 있게 도와주는 Hook

바닐라 자바스크립트에서 getElementById나 querySelector와 비슷한 역할을 할 수 있다고 볼 수 있다.

예를 들면 특정 엘리먼트의 크기를 가져오거나 스타일 변경, input에 포커스, 스크롤 박스 조작 등의 작업을 해야할 때 useRef를 사용하기에 적합하다.
또한 지도나 그래프라던가 비디오 등 외부 라이브러리를 사용할 때도 특정 DOM 에다 적용하기 때문에 DOM 을 선택해야 하는 상황에서도 useRef를 사용하여 컨트롤할 수 있다.

=> 즉 특정 태그만 지정해서 그것을 조작 해야할 때 useRef를 쓴다고 볼 수 있다.

1-2. useRef 특징

반환된 useRef 객체는 컴포넌트의 전생애 주기를 통해 유지가 된다는 것이다.
즉, 컴포넌트가 계속해서 렌더링이 되어도 컴포넌트가 언마운트되기 전까지는 값을 그대로 유지할 수 있고, currnet 속성은 값을 변경해도 상태를 변경할 때 처럼 React 컴포넌트가 재렌더링 되지 않는다.

1-3. useRef 사용법

기본적인 사용법은 useRef로 객체를 생성하고 원하는 DOM에 ref객체를 넣어주면 ref.current가 해당 DOM을 가르키게되고 current를 사용해 DOM을 직접 조작하는 방식이다.

import React, { useRef } from 'react';

//  ref는 맵이 렌더링될 DOM 요소를 참조
const mapElement = useRef(null);

// 지도 생성
const map = new window.kakao.maps.Map(mapElement.current, mapOption);

return (
   <div ref={mapElement}/>;
)

이렇게 하면 해당 div 태그에 map을 생성하고 조작할 수도 있다 !!!

1-4. 레퍼런스

참고 블로그
참고 블로그 2
참고 블로그 3
참고 문서