React 에서 useRef 사용하기

참조: https://ko.reactjs.org/docs/hooks-reference.html#useref

 

useRef는 생각보다 유용합니다. SPA에서는 변화에 따른 렌더링으로 객체에 직접 접근하는 것은 위험합니다. 

그렇기 때문에 React에서는 useRef hook을 지원합니다. useRef가 직접 객체에 접근하는 것을 가능하게 해주는 이유는 매번 렌더링을 할 때마다 동일한 객체를 제공한다고 공식문서에 나와있습니다. 

 

반면, state와는 달리 실시간 변화를 감지하여 변화된 값을 리턴하지는 않습니다. 

이게 가능하게 하려면 ref를 따로 setState해줘야 합니다. 

 

 

1. useRef를 통한 timer만들기

참조 : https://dmitripavlutin.com/react-useref-guide/

 

타이머를 만들기 위한 jsx를 작성합니다.

import { useState, useRef } from "react";

export default function UseRefSample1() {
  const countRef = useRef(null);
  const [Count, setCount] = useState(0);

  return (
    <div className="wrap">
        <h2>StopWatch 만들기</h2>
        <div>
            <div className="timer">Timer: {Count}ms</div>
            <button>Start</button>
            <button>Stop</button>
            <button>Reset</button>
        </div>
    </div>
  );
}

countRef는 setInterval을 담기 위함이고 Count state는 초 단위를 업데이트하는 데 사용됩니다. 

그리고 타이머 시작, 중지, 리셋 기능을 구현합니다.

  const startHandler = () => {
    countRef.current = setInterval(() => setCount((c) => c + 1), 100);
  };

  const stopHandler = () => {
    clearInterval(countRef.current);
    countRef.current = null;
  };

  const resetHandler = () => {
    stopHandler();
    setCount(0);
  };

startHandler에서 setInterval로 초단위 Count에 setState 시켜주고 해당 setInterval은 ref.current에 담겨있습니다.

그렇기 때문에 stopHandler에서 쉽게 clearInterval을 해줄 수 있습니다.

다시 startHandler를 클릭하면 Count의 값은 남아있으므로 기존 카운트가 쌓인 값에서 다시 1초마다 플러스되고,

resetHandler에서 온전한 리셋을 위해 Count의 값도 0 처리해줍니다. 

 

결과

 

2. useRef를 통해 input Focus 주기

프로젝트에 입력하는 form 양식에 빈 값 체크를 해야 하는 경우가 있다면 체크 후 해당 input으로 focus를 주는 기능에서 유용하게 사용할 수 있습니다. 

우선 마크업을 해줍니다.

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

export default function UseRefSample2() {
  const [Msg, setMsg] = useState(null);
  return (
    <div className="wrap">
      <h2>Input Focus</h2>
      <p>
        <input placeholder="Name" />
      </p>
      <p>
        <input placeholder="Age" />
      </p>
      <button>Submit</button>
      {
          Msg === null ? "" 
          : Msg ?  <div className="msg">모두 입력되었습니다!</div> 
          : <div className="msg warning">모두 입력하세요!</div>
      }
    </div>
  );
}

그리고 input value와 state를 연결합니다. 입력 양식이 여러 개라면 객체 타입으로 한 state에 묶고 name값을 키값으로 지정하여 onChange시 상태 변경해주는 것을 추천합니다.

 

{...}
  const [Inputs, setInputs] = useState({
    name: "",
    age: ""
  });

  const handleChange = (e) => {
    setInputs({
      ...Inputs,
      [e.target.name]: e.target.value
    });
  };
{...}
      <p>
        <input
          placeholder="Name"
          name="name"
          value={Inputs.name}
          onChange={handleChange}
        />
      </p>
      <p>
        <input
          placeholder="Age"
          name="age"
          value={Inputs.age}
          onChange={handleChange}
        />
      </p>

 

그리고 모두 입력한 뒤 처리되는 handleSubmit을 작성합니다. 

여기서는 간단하게 Msg 값 하나를 두어 null일 때는 메시지가 보이지 않고, false일 때는 "모두 입력하세요!", true일 때는 "모두 입력되었습니다."라는 메시지를 띄웁니다. 

이때 빈 값 체크를 하게 되는데 handleCheckForm 함수를 따로 두어 사용하도록 하겠습니다. 

 

const handleSubmit = (e) => {
  if (handleCheckForm()) {
  	setMsg(true);
  } else {
  	setMsg(false);
  }
};
  
 const handleCheckForm = () => {
  if (Inputs.name === "") {
  	alert("이름을 입력하세요!");
  	return false;
  }
  if (Inputs.age === "") {
  	alert("나이를 입력하세요!");
 	 return false;
  }
  return true;
};

  return (
    <div className="wrap">
      <h2>Input Focus</h2>
      { ... }
      <button onClick={handleSubmit}>Submit</button>
      {Msg === null ? (
        ""
      ) : Msg ? (
        <div className="msg">모두 입력되었습니다.</div>
      ) : (
        <div className="msg warning">모두 입력하세요!</div>
      )}
    </div>
  );

name, age 둘 중 하나라도 빈 값이면 false를 반환하고 둘 다 빈값이 아니면 true를 반환하면서 setMsg가 true 혹은 false로 변경됩니다. 

그러면 나머지 부가 기능들을 useRef를 통해 처리해보도록 하겠습니다. 

 

1. submit클릭 시 값이 비어있는 input에 자동 focus를 한다. 

2. name input에서 Enter시 다음 input으로 이동, age input에서 Enter시 handleSubmit 호출 

 

먼저 useRef를 통해 nameRef, ageRef를 선언하고 input에 연결시켜줍니다. 

객체 접근은 current를 통해 할 수 있습니다. 

해당 ref를 console로 조회해보면 내부적으로 많은 정보를 담고 있음을 알 수 있습니다. 

 

 

ref 조회 결과

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

const nameRef = useRef(null);
const ageRef = useRef(null);

// Enter시 age input으로 focus
const handleNextInput = (e) => {
    if (e.key === "Enter") {
        ageRef.current.focus();
    }
};

// Enter시 handleSubmit 호출
const handleChangeSubmit = (e) => {
    if (e.key === "Enter") handleSubmit();
};

// 최초 페이지 진입시 name input에 focus
useEffect(() => {
    nameRef.current.focus();
}, []);

{...}

<p>
    <input
        placeholder="Name"
        name="name"
        value={Inputs.name}
        ref={nameRef}
        onChange={handleChange}
        onKeyPress={handleNextInput} 
    />
</p>
<p>
    <input
        placeholder="Age"
        name="age"
        value={Inputs.age}
        ref={ageRef}
        onChange={handleChange}
        onKeyPress={handleChangeSubmit}
    />
</p>

 

 

이 외에 useRef를 통해 다른 기능을 구현한 것들을 살펴보고 싶다면 해당 글도 확인해보세요. 

 

React div 스크롤시 Fix 하기 (Element scroll)

react draggable 간단 샘플

React 에서 애니메이션, 인터렉션 구축하기 (emotion / tweenmax)