React useRef

useRef는 useState와 비슷하지만 큰 차이점이 있습니다.

useState는 값이 바뀔 때마다 재렌더링이 되지만 useRef는 값이 바뀌어도 재렌더링이 안됩니다.

화면에는 바뀐 값이 나타나지 않지만 재렌더링을 하면 화면에 바뀐 값이 보여지게 됩니다.

또 useRef는 직접적인 DOM요소에 접근 할 수 있습니다. 자바스크립트의 document.querySelector또는 document.getElementById 같은 역할이라고 이해하면 될것같습니다.

useRef에는 current 속성이 있습니다.

 

const countRef = useRef(0);

console.log("ref", countRef.current);

current 속성에는 useRef의 초기값이 들어있습니다. 위의 코드에서는 초기값이 0이므로 콘솔에는 0이 찍혀있습니다.

input 태그에 focus 자동으로 맞추기

화면이 Mount(첫 화면 렌더링)이 되었을 때 input 태그에 포커스가 자동으로 맞춰지는 기능을 많이 씁니다. 로그인 화면 같은 경우에 사용자가 마우스를 사용하지 않고 바로 아이디를 입력할 수 있게 많이 쓰입니다.

이럴 경우에는 초기값이 굳이 필요하지 않기 때문에 null을 주로 많이 쓰지만 테스트 결과 문자, 숫자, 불린형을 넣어도 결과는 잘 나왔습니다.

하지만 초기값이 문자나 숫자, 불린형으로 되어있으면 협업시에 초기값의 의미 때문에 헷갈릴 수 있어서 null이라고 많이 쓰는것 같습니다.

 

const countRef = useRef(null);

 useEffect(() => {

    countRef.current.focus();

    return () => {

      countRef.current.blur();

    };

  }, []);

  <input type="text" placeholder="아이디를 입력해주세요"

ref={countRef} />

useEffect에 대해서는 아래의 링크에서 볼 수 있습니다.

useEffect 알아보기

브라우저에서 새로고침을 해보면 input에 포커스가 자동으로 가있는것을 볼 수 있습니다.

useState와 useRef의 차이

useState로 버튼을 1씩 증가하는 코드를 만들고 브라우저에서 확인 해보면 바로 1씩 증가되는 것을 배웠었습니다.

하지만 useRef는 버튼을 아무리 눌러도 화면에는 아무런 변화가 없습니다. 그렇다고 useRef의 값이 바뀌지 않는건 아닙니다.

useState와 useRef를 콘솔에 찍어보면 값은 둘 다 제대로 바뀌고 있습니다.

useRef의 값이 바뀌었는지 확인을 하려면 재렌더링이 필요합니다.

//App.js

import { useRef, useState } from "react";

import "./App.css";

function App() {

  const [count, setCount] = useState(0);

  const countRef = useRef(0);

  console.log("state", count);

  console.log("ref", countRef.current);

  const addFn = () => {

    setCount(count + 1);

  };

  const refAddFn = () => {

    countRef.current = countRef.current + 1;

  };

  return (

    <div className="App">

      <p>state: {count}</p>

      <p>Ref: {countRef.current}</p>

      <button onClick={addFn}>State+</button>

      <button onClick={refAddFn}>Ref+</button>

    </div>

  );

}

export default App;

Ref+ 버튼을 누르고 State+ 버튼을 누르면 Ref의 값이 바뀌어져 화면에 나타납니다.

콘솔창에서 확인하면 재렌더링을 하지 않아도 누를 때마다 1씩 증가합니다.

이런것들 말고도 useRef는 DOM을 직접적으로 접근 할 수 있어서 다양한 기능을 만들 수 있습니다. 

DOM을 직접적으로 접근 할 때에는 처음 예시처럼 해당 태그에 ref 속성을 꼭 넣어서 useRef와 연결해주어야 합니다.

const countRef = useRef(null);

<input type="text" placeholder="아이디를 입력해주세요"

ref={countRef} />

태그에 있는 ref의 속성값은 useRef를 담고 있는 변수명을 꼭 넣어야 합니다.