TIL no.41 - React 에서 특정 Dom 에 접근하기 : useRef, ref

 

 

우리가 특정 Dom 을 선택하기 위해 javascript에서는 getElementId, querySelector 같은 selector 함수를 사용해서 선택할 수 있었습니다.

 

그렇다면 React에서는 어떻게 Dom에 접근할 수 있을까요?

 

 

사실 왜 접근해야 하는지 필요성을 느끼기 전까지는 알고 있어도 익숙해지지가 않습니다.

저는 이번에 react native를 사용하면서 라이브러리를 많이 접해봤는데 라이브러리에서 useRef가 많이 사용되어서 어찌저찌 사용은 했지만, 더 개념적으로 이해하고 싶어서 정리하게 되었습니다.

 

React에서는 ref라는 것을 이용해 dom에 접근할 수 있는데 함수형 컴포넌트에서는 useRef 라는 Hook 함수를 사용합니다.

저는 함수형 컴포넌트를 예로 작성하도록 하겠습니다.

 

 

리액트에서 dom에 접근해야 할 예로는,

 

특정 엘리먼트의 크기를 가져와야 한다거나

포커스를 설정해야 된다거나

라이브러리를 사용할 때 라이브러리에서 만들어놓은 dom에 접근해서 값을 얻어야 된다거나

 

이 외에도 앞으로 React를 사용하면서 필요성을 느끼게 될 일은 많을 것입니다. (아직 모르신다면)

만일 사용하고 계시다면 숨쉬듯이 아무렇지 않게 어렵지 않게 사용하고 계실겁니다. 크게 어렵지 않은 부분이라고 생각하기 때문이죠.

그래서 더 왜, 어떻게 에 대해서 정리해두고 싶었습니다.

 

import React, { useRef } from "react";

const MyTextInput = () => {
	const textInput = useRef();
    
    focusTextInput = () => textInput.current.focus();
    
    return (
    <>
    	<input type="text" ref={textInput} />
        <button onClick={focusTextInput}>Focus the input !</button>
    </>
    );
  }

* html.element.focus() 를 하면 해당 선택된 element로 focus 됩니다.

 

위와 같이 접근하고 싶은 dom 부분에 ref를 넣어주면 그 부분을 선택할 수 있고,

textInput.current 를 한 뒤에 원하는 것을 가져오거나 실행하면 됩니다.

*current 속성으로 변화할 때마다 그 dom에 일치하는 값을 가져옵니다.