자바스크립트 환경에서 특정 DOM 요소 선택하기
바닐라 자바스크립트에서 특정 DOM을 지정하기 위해서는 해당 DOM 요소에 부여한 id, 혹은 class를 통해 지정합니다.
<div id="map" style="width:500px;height:400px;"></div>
<script>
var container = document.getElementById('map');
</script>
자바스크립트를 사용하는 카카오 지도 API의 경우도 다음과 같이 지도영역으로 지정하고싶은 div 태그를 getElementById("ID")를 사용해 지정했습니다.
그렇다면 리엑트 환경에서는 어떤 방식으로 DOM 요소를 선택할 수 있을까요.
React 에서 특정 DOM 요소 선택하기
React 환경에서는 React에서 추가적인 라이브러리 설치없이 기본으로 제공되는 useRef 훅을 사용합니다.
import React, { useRef } from 'react'; //useRef Hook import
const container = useRef();
const map = new kakao.maps.Map(container.current, options);
...
<MapWrapper ref={container} />위 코드와 같이 자바스크립트의 DOM 선택 방법이 아닌 useRef Hook을 통해 특정 컴포넌트 혹은 jsx의 element 요소를 선택 할 수 있습니다.
- useRef Hook을 사용하기 위해 import
- useRef로 지정할 DOM요소를 저장할 container 변수 선언
- 지정할 요소에 ref={myRef} 형태의 프로퍼티 지정
다음과 같은 방식으로 ref를 사용할 준비가 완료되면
myRef.current와 같이 current 프로퍼티를 사용해 지정한 요소를 사용할 수 있게 됩ㄴ다.
카카오 맵 API의 경우 지도의 컨테이너로 특정 요소를 지정해야 하는데 자바스크립트 메소드가 아닌 useRef Hook을 사용해 React에서 원하는 컴포넌트를 지정해 사용할 수 있었습니다.
