[React] useRef

document.getElementById('');

처럼 저장공간이나 DOM요소에 접근하기 위해 쓰이는 Hook이다.

이해를 돕기 위해 비유하자면, useRef는 책갈피의 역할을 한다고 이해해도 좋다.

 

일단 가장 먼저, useRef를 사용하는 이유이다.

• ref 객체는 리랜더링에 영향을 받지 않고 저장된다.
• state등과 다르게 ref 객체에 의한 리랜더링이 발생하지 않는다.

최근에 설명한 map api처럼 같은 DOM요소를 여러번 재사용하는 경우 등에서 document등을 사용하면 id값의 충돌로 인해 무한루프 등의 에러가 발생할 수 있다.

이럴때 useRef를 사용하면 좋다.

 

 

useRef 사용법

import React, { useRef, useEffect } from 'react';

const MapComp = () => {
    const mapRef = useRef(null);
    const optionRef = useRef(null);
    ...
    useEffect(() => {
    	...
        const map = new kakao.maps.Map(mapRef.current, option);	//.current로 DOM요소 조작
        optionRef.current = map;	//저장공간 참조 설정
        ...
    },[]);
    ...
    return (
    	<div className="main_map" ref={mapRef} ></div>	//ref={}로 지정
    )
}

 

이런식으로 사용할 수 있다.

 

const tempRef = useRef("초기값");

useRef 선언과 초기화를 해주고

 

<div ref={tempRef}></div>

DOM요소의 경우에는 ref={}로 설정이 가능하다.

 

const map = new kakao.maps.Map(mapRef.current, option); 
optionRef.current = map;

저장공간의 접근은 .current로 가능하다.