[React] Hooks - useRef

useRef

• 특정 DOM을 가리킬 때 쓰는 함수이다.
• ref가 HTML에 쓰이면, useRef로 생성된 ref는 전달받은 DOM 엘리먼트를 current 프로퍼티의 값으로 받는다.

useRef를 사용하는 경우

• 특정 DOM 요소의 값을 가져오기
  (대표적으로 input 요소의 value 가져오기, input 요소에 포커스 취하기를 할 때 사용된다.)
• 변수 관리하기
• 이벤트 함수 처리

예제를 통해 배워보자!

---

DOM 요소에 접근하기

이름을 입력하고 등록하는 예제이다.

등록 버튼을 누르면 위 이미지처럼 input 창으로 포커스되도록 하기 위해 useRef를 사용해주었다.

import React, { useCallback, useRef, useState } from "react";

const SayMyName = () => {
  const [name, setName] = useState("");
  const [myName, setMyName] = useState("name");
  const inputRef = useRef(null);

  const onChange = useCallback((e) => {
    setName(e.target.value);
  }, []);

  const onClick = useCallback(() => {
    inputRef.current.focus();
    setMyName(name);
  },[name]);

  return (
    <div>
      <div>
        <input value={name} onChange={onChange} ref={inputRef} />
        <button onClick={onClick}>등록</button>
      </div>
      <div>
        당신의 이름은 <b>{myName}</b>이군요!
      </div>
    </div>
  );
};

export default SayMyName;

리액트에서 ref는 다음과 같이 정의할 수 있다.

const inputRef = useRef(null);

정의한 ref를 input에 다음과 같이 설정할 수 있다.

<input  ref={inputRef} />

그러면 우리는 inputRef를 사용해서 input의 ref를 쉽게 사용할 수 있다.

등록 버튼을 누르면

inputRef.current.focus();

이 코드를 통해 input 에 포커스가 가는 것을 확인할 수 있다!

---

로컬 변수 사용

useRef는 로컬 변수를 사용할 때도 사용할 수 있다.

ref의 값은 아무리 바뀌어도 컴포넌트가 렌더링되지 않는다는 특징이 있다.

컴포넌트가 아무리 렌더링되어도 바뀌지 않아야 할 값이 있을 때 useRef를 사용해주면 된다.

예제를 통해 useRef와 useState를 사용해서 선언한 변수의 차이를 살펴보자.

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

const RefTest = () => {
  const countRef = useRef(0);
  const [countVar, setCountVar] = useState(0);
  const [isRender, setIsRender] = useState(false);

  console.log(`***** 렌더링 후 Ref: ${countRef.current}`);
  console.log(`***** 렌더링 후 Var: ${countVar}`);

  const increaseRef = () => {
    countRef.current = countRef.current + 1;
    console.log(`ref 증가 --> ${countRef.current}`);
  };
  const increaseVar = () => {
    setCountVar(countVar + 1);
    console.log(`var 증가 --> ${countVar}`);
  };
  const renderPage = () => {
    setIsRender(!isRender);
    console.log(`렌더링! ${isRender}`);
  };
  return (
    <div>
      <div>
        <p>Ref 값 : {countRef.current}</p>
        <p>Var 값 : {countVar}</p>
      </div>
      <div>
        <button onClick={increaseRef}>
          Ref Up!
        </button>
        <button onClick={increaseVar}>
          Var Up!
        </button>
        <button onClick={renderPage}>
          Render Now
        </button>
      </div>
    </div>
  );
};

export default RefTest;

위 코드를 실행해보자.

useState로 선언한 변수

버튼을 누를 때마다 렌더링되어 변화된 값이 화면에 표시되는 것을 확인할 수 있다.

useRef로 선언한 변수

버튼을 여러번 눌러도 화면에 아무 변화도 없다.
하지만 콘솔에 ref값이 변화하고 있는 것이 찍히고 있다.

Render Now 버튼을 눌러 컴포넌트가 렌더링되자 변화된 ref 값이 반영되어 화면에 보인다.

=> 이를 통해 ref값이 변화해도 렌더링되지 않는다는 것을 알 수 있다.

---

마치며

오늘은 Hooks의 useRef에 대해 공부해봤다. 리액트 프로젝트를 진행하면서 useRef를 사용해서 input값에 접근하는 경험을 많이 해봤었다. 하지만 useRef를 사용해서 로컬 변수를 사용할 수 있다는 사실은 오늘 처음 알게 되었다. 다 알고있다고 생각했는데 사실 거의 모르고 있었던것이다.... (충격과 공포)
앞으로도 리액트와 관련된 포스팅을 진행하며 많은 것을 배우게 될 것 같다. 제대로 공부해봐야겠다!!