useRef는 DOM 요소에 접근할 수 있도록 하는 react hook이라며, 지난 TIL에서 고유 ID 값을 주다가 정리해 보았다, 자동 포커싱에서도 사용 된다고 정리해 놓았는데, 한번 더 정리하고 공부하면서 포커싱 기능을 구현해 보았다!

useRef 개념 정리!

형태

import "./App.css";
import { useRef } from "react";

function App() {
  const ref = useRef("초기값");
  console.log("ref", ref);

  return (
    <div>
      <p>useRef</p>
    </div>
  );
}

export default App;

콘솔 확인시

이렇게 current에 담겨있다!
(중요) 이렇게 설정된 ref 값은 컴포넌트가 계속해서 렌더링 되어도 unmount 전까지 값을 유지!

활용

1. 저장공간
   state와 비슷한 역할이지만 변화가 일어나면 state는 리렌더링
   ref값은 렌더링을 일으키지 않는다.
   - 정리하면
   1) state는 리렌더링이 꼭 필요한 값을 다룰 때 쓰면 된다.
   2) ref는 리렌더링을 발생시키지 않는 값을 저장할 때 사용한다.

2. DOM
3. 렌더링 되자마자 특정 input이 focusing 돼야 한다면 useRef를 사용하면 된다!

focusing 만들어보기

<input /> 태그에는 ref라는 속성이 있다. 이걸 통해 해당 DOM 요소로 접근한다.

useRef 사용하여 포커싱 주기

import { useEffect, useRef } from "react";
import "./App.css";

function App() {
  const idRef = useRef("");

  // 렌더링이 될 때 ->useEffect
  useEffect(() => {
    idRef.current.focus(); //focus 메서드
  }, []);

  return (
    <>
      <div>
        아이디 : <input type="text" ref={idRef} /> //ref 설정
      </div>
      <div>
        비밀번호 : <input type="password" />
      </div>
    </>
  );
}

export default App;