[React] 리액트 Hooks (3) - useRef: DOM 요소 접근

📌 useRef로 DOM 요소 접근

Ref를 사용하면 DOM 요소에 접근할 수 있는데, 이는 Document querySelector()과 비슷한 기능을 합니다.

 

input 태그로 예제 코드를 먼저 작성해보겠습니다.

const App = () => {
  return (
    <div>
      <input type = "text" placeholder="username"/>
      <button>로그인</button>
    </div>
  );
};
export default App;

 

 

input을 클릭하면 input이 활성화되는데, 이 상태를 input이 focus 상태가 되었다고 합니다. focus를 자동으로 시켜주는 로직을 구현하려면 DOM 요소에 직접적으로 접근해야 합니다. 이를 useRef로 쉽게 구현할 수 있습니다. 로그인 페이지에 들어갔을 때, input을 클릭하지 않아도 focus 상태가 되도록 만들어보겠습니다.

 

ref 속성

먼저, useRef로 inputRef를 만들었습니다. 그리고 input태그에 ref 속성으로 inputRef를 참조하고, useEffect로 inputRef 값을 확인해보겠습니다.

const App = () => {
  const inputRef = useRef();

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

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

콘솔에 current 안에 input이 뜨는 것을 확인할 수 있습니다.

 

console.log를 지우고 inputRef.current로 접근해서 간단하게 .focus()를 활용하면 새로고침을 했을 때 input에 자동으로 focus가 됩니다.

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

 

로그인을 눌렀을 때, 입력한 username이 팝업으로 뜨게 할 수도 있습니다.

 

먼저, 버튼에 onClick={login} 코드를 작성하고

login 함수를 정의합니다. alert을 이용하면서 input.Ref.current.value로 값에 접근하면 됩니다.

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

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

 

이렇게 확인이 가능합니다.

 

 

⚠️ 주의: useRef의 최초 기본 값은 useRef()로 받은 인수

DOM 요소에 주의할 점은, useRef의 최초 기본 값은 return 문에 정의해 둔 DOM이 아니고 useRef()로 넘겨받은 인수라는 것입니다. useRef가 선언된 당시에는 아직 컴포넌트가 렌더링되기 전이라 return으로 컴포넌트의 DOM이 반환되기 전이므로 Undefined입니다. 코드를 통해 알아보겠습니다.

const RefComponent = () => {
  const inputRef = useRef();

  // 이때 렌더링이 되기 전(즉, 반환되기 전)이라 undefinded를 반환
  console.log(inputRef.current); // undefined

  useEffect(() => {
    console.log(inputRef.current); // <input type="text"/>
  }, [inputRef]);

  return <input ref={inputRef} type="text" />;
};