[React] useRef의 개념과 2가지 사용법

 

useRef란?

React에서 사용되는 Hook 중 하나로, 함수형 컴포넌트에서 변수를 저장하고 관리하는 데 사용된다.
useRef를 사용하면 함수형 컴포넌트 내에서도 값이 유지되며, 이전 값에 접근할 수 있다.

일반적으로 useRef는 DOM 요소에 대한 참조를 생성할 때 사용된다.

그러나 useRef는 단순히 DOM 참조가 아니라, 컴포넌트 전체에서 유지하고 싶은 어떤 값에도 사용할 수 있다.

useRef는 .current 속성을 사용하여 값에 접근하거나 값을 변경할 수 있다.

.current를 통해 접근된 값은 컴포넌트가 리렌더링되어도 변경되지 않는다.

 

React에서 useRef는 크게 두가지 용도로 활용된다.

1. 렌더링 시 초기화 되지 않고 유지되는 조작 가능한 변수 값을 선언할 경우
2. 일반 JavaScript에서 DOM을 선택하는 getElementById나 QuerySelector와 같이 접근하고자 할 경우

 

1. 렌더링 시 초기화 되지 않고 유지되는 조작 가능한 변수 값을 선언할 경우

App.js

import { useState, useRef } from 'react'
import './App.css';
 
function App() {
 
  const [render, setRender] = useState(false);
  const countRef = useRef(0);
  let countVar = 0;
 
  console.log('렌더링 후 countRef :', countRef.current);
  console.log('렌더링 후 countVar :', countVar);
 
  const increaseRef = function () {
    countRef.current = countRef.current + 1;
    console.log('Ref Up! --->', countRef.current);
  }
 
  const increaseVar = function () {
    countVar = countVar + 1;
    console.log('Var up! --->', countVar);
  }
 
  const doRender = function () {
    setRender((prevrender) => { return !prevrender });
  }
 
  return (
    <>
      <p>Ref : {countRef.current}</p>
      <p>Var : {countVar}</p>
 
      <div>
        <button onClick={increaseRef}>Ref Up</button>
        <button onClick={increaseVar}>Var up!</button>
        <button onClick={doRender}>Render</button>
      </div>
    </>
  );
}
export default App;
 

const [render, setRender] = useState(false);

: render 상태를 useState를 사용하여 정의하고 초기값을 false로 설정한다.

setRender 함수는 render 상태를 업데이트할 때 사용된다.

const countRef = useRef(0);

: countRef라는 참조 변수를 useRef를 사용하여 생성하고 초기값을 0으로 설정한다.

let countVar = 0;

: countVar라는 변수를 선언하고 초기값을 0으로 설정한다.

이렇게 코드를 만들어 준 후, Ref Up 버튼을 누르고 Render를 누르면 값이 계속 저장되며 증가될 것이고,

Var Up 버튼을 누르면 값이 저장되다가 Render버튼을 누르면서 초기화가 되면서 0으로 바뀌는 차이가있다.

---

2. 일반 JavaScript에서 DOM을 선택

import { useState, useRef } from 'react'
import './App.css';
 
function App() {
 
  const inputEl = useRef(null);
  const [backgroundColor, setBackgroundColor] = useState('white');
 
  const onButtonClick = function () {
    setBackgroundColor('red');
    inputEl.current.focus();
  }
 
  return (
    <>
      <input ref={inputEl} type="text" style={{ backgroundColor: backgroundColor }} />
      <button onClick={onButtonClick}> Buttooon</button>
    </>
  );
}
export default App;
 

const inputEl = useRef(null);

: inputEl이라는 변수를 useRef를 사용하여 생성하고 초기값을 null로 설정한다.

이 변수는 나중에 <input> 요소에 대한 참조를 가질 것이다.

const onButtonClick = function () { ... }:

inputEl.current.focus()를 호출하여 버튼을 클릭했을 때 <input> 요소에 포커스를 맞추는 함수인 onButtonClick을 정의한다.

<input> 요소를 만들고, ref 속성을 사용하여 inputEl 변수에 대한 참조를 연결한다. 이렇게 함으로써 inputEl.current를 통해 <input> 요소에 접근할 수 있다.

버튼을 만들고, 클릭 시 onButtonClick 함수가 호출되도록 onClick 핸들러를 연결할 수 있다.

 

클릭 했을때, input에 포커스가 생기고, 백그라운드 컬러가 빨강이 된다.