[React] useRef

언제 사용할까?

특정 값을 저장하기 위해 사용

Ref가 변경된다고해서 리렌더링이 일어나지 않는다. (state와 차이)

 

사용법

1) useRef import

 

2) useRef 사용해 초기값 지정

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

current라는 key에 값이 저장돼있는 것을 확인할 수 있다!

 

3) 값 변경하기

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

  ref.current = "바꾼 값";
  console.log("ref: ", ref);
}

ref의 current에 접근해 값을 바꿔준다

 

 

 

사용 예제

✔︎ 아이디, 비밀번호 input 태그가 있는 페이지에 접속하면 아이디 input에 바로 포커스 되도록 하기

 

1) 기본 구조 만들기

function App() {
  return (
    <>
      <div>
        아이디: <input type="text"></input>
      </div>
      <div>
        비밀번호: <input type="text"></input>
      </div>
    </>
  );
}

 

2) 최조 렌더링시 포커스할 수 있도록 <input>의 ref속성을 이용해 둘을 연동시켜두고, focus()를 사용

import { useEffect, useRef } from "react";

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

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

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

export default App;

ref로 연결해둔 태그에 포커스된다

 

아이디가 10자리 입력되면 자동으로 비밀번호 필드로 이동시키기

import { useEffect, useRef, useState } from "react";

function App() {
  const [value, setValue] = useState("");
  const idRef = useRef("");
  const pwRef = useRef("");

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

  if (document.activeElement === idRef.current && value.length >= 10) {
    pwRef.current.focus();
  }

  const inputHandler = (event) => {
    setValue(event.currentTarget.value);
  };

  return (
    <>
      <div>
        아이디:{" "}
        <input
          type="text"
          ref={idRef}
          value={value}
          onChange={inputHandler}
        ></input>
      </div>
      <div>
        비밀번호: <input type="text" ref={pwRef}></input>
      </div>
    </>
  );
}

export default App;

- useEffect로 value를 의존성배열로 갖는 useEffect를 활용하는 방법도 떠올랐지만, 챌리지반에서 발표할 문서에서 읽은 내용이 떠올라 렌더링 중에 focus 여부를 결정하는 방향으로 변경했다!