[React] useRef를 통해 DOM요소에 직접 접근하기

useRef의 변수 관리 저장공간으로써 사용하는 방법은 아래의 링크를 통해서 보면 된다.

[React] useRef는 언제 왜 사용할까?

 

이번에는 useRef를 통해 DOM 요소에 직접 접근하는 방법을 알아볼 것이다. 

 

 

사용법

const ref = useRef(value);

 

위의 코드를 통해 ref에는 객체가 반환되게 되는데 그때 반환된 객체를 다음과 같이 태그의 ref 속성으로 넣어주기만 하면 우리는 쉽게 해당 요소에 접근이 가능하다.

<input ref = {ref} />

 

대표적으로 회원가입 등의 페이지에서 사용자가 input 요소를 클릭하지 않아도 input 요소에 focus를 주고 싶을 때 주로 사용한다.

 

 

사용 예시

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

const App = () => {
  const inputRef = useRef();
    
  useEffect(() => {
    inputRef.current.focus();>>
  }, []);
    
  return (
    <div>
      <input ref={inputRef} type="text" placeholder="아이디를 입력하세요." />
      <button>로그인</button>
    </div>
  );
};

export default App;

 

다음과 같은 코드를 실행시키게 되면 페이지가 뜨자마자 input 요소에 focus 되어 바로 입력이 가능한 것을 볼 수 있다. 

이와 같이 useRef는 DOM 요소에 직접 접근할 때도 사용한다는 것을 알 수 있었다. 

 

 

---

출처 : 유튜브 별코딩 (직접 듣기 강추!)