[React hook] useRef - DOM 요소에 접근하기

# useRef를 사용해서 DOM 요소에 접근하기

 

우리가 이전에 썼었던 document.querySelector 와 같은 기능을 할 수 있도록 DOM요소에 접근해보자.

 

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

function TestRef4() {
  const inputRef = useRef();

  useEffect(() => {
    console.log(inputRef);
    inputRef.current.focus();
  }, []);

  const login = () => {
    alert(`환영합니다 ${inputRef.current.value}`);
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} type="text" placeholder="username" />
      <button type="button" onClick={login}>로그인</button>
    </div>
  );
}

export default TestRef4;

 

여기서 기능을 정리해보자

 

 

 

1. 맨 처음 렌더 되었을 때 input에 커서가 가도록 한다.

 

우선 inputRef = useRef() 로 만들어준다.

그리고 input 태그에 ref = {inputRef} 를 넣어준다.

 

그런 다음 useEffect 빈 배열로 처음 렌더 될때 focus 가게 해보자

콘솔로 inputRef를 찍어보면 그 안에 current 에 기능이 많이 나온다.

 

그 기능중에 focus()를 쓰면 커서가 가게 된다.

 

 

 

 

2. 로그인 버튼을 누르면 input에 입력한 내용이 alert에 뜨도록 하자

그러려면 input에 입력한 내용을 가져올 수 있어야 한다.

inputRef.current.value 로 그 값을 가져올 수 있다.

그걸로 alert 를 띄워준다.

 

 

 

---

querySelector 대신 뭘 쓸 수 있을까... 그게 고민스러웠는데 이런 기능을 몰랐다니...!! 

이제라도 알아서 다행이고! 또 무한 렌더링을 피할 수 있는 방법을 찾아서 다행이다.