React useRef

useRef로 DOM 선택하기

useRef는 react에서 특정 DOM을 선택할 때 사용한다.
useRef를 사용하여 초기화 버튼을 눌렀을 때 id 입력창에 focus 되도록 하는 예제를 만들어보자.

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

function App() {

  // useState를 활용하여 상태를 관리해준다.
  const [inputs, setInputs] = useState({
    name: '',
    nickname:''
  });
  
  // useRef를 사용하여 nameInput 선언
  const nameInput = useRef();
  const {name, nickname} = inputs;

  const onChange = e => {
    const {value, name} = e.target
    setInputs({
      ...inputs,
      [name]: value
    })
  }

  const onReset = () => {
    setInputs({
      name: '',
      nickname: ''
    })
    nameInput.current.focus();
  }

  return (
    <div>
      <input name="name" onChange={onChange} placeholder='이름' value={name} ref={nameInput}/>
      <input name="nickname" onChange={onChange} placeholder='닉네임' value={nickname}/>
      <button onClick={onReset}>초기화</button><div>
        <b>값: </b>
        {name} ({nickname})
      </div>
    </div>
  );
}

export default App;

• nameInput을 useRef()로 선언하고 name input에 ref={nameInput}을 해주면 해당 DOM을 선택할 수 있다.
• 보통 setTimeout, setInterval을 통해 만들어진 id, scroll 위치, 배열의 고유 key 값을 정보를 유지하고 싶을 때 사용한다.

useRef로 값 유지하기

useRef는 값을 유지하는데도 쓴다. useState의 경우 값이 변경될 때 마다 다시 렌더링이 된다. 이때 해당 컴포넌트 함수의 변수들이 모두 초기화가 되고 모든 함수 로직 등이 다시 실행된다. 하지만 useRef 안에 있는 값은 다시 렌더링을 해도 변하지 않는다.

다음 예제를 통해 확실하게 알아보자.

import { useState, useRef } from 'react'
import './App.css';

function App() {
  const [render, setRender] = useState(false);
  
  const [state, setState] = useState(0);
  const countRef = useRef(0);
  let countVar = 0;

  
  console.log('렌더링 후 countRef 변수:', countRef.current);
  console.log('렌더링 후 coutVar 변수 :', countVar);
  console.log('렌더링 후 state 변수 : ', state);
  
  const increaseVar = () => {
    countVar = countVar + 1;
    console.log('normal Var 증가! --->', countVar);
  }

  const increaseState = () => {
    setState(state+1);
    console.log('useState 증가! --->', state);
  }

  const increaseRef = () => {
    countRef.current = countRef.current + 1;
    console.log('useRef 증가! --->', countRef.current);
  }


  const doRender = () => {
    setRender(!render);
  }

  return (
    <div className="App">
      <header className="App-header">
        <p>Var: {countVar}</p>
        <p>State: {state}</p>
        <p>Ref: {countRef.current}</p>
        
        <div>
          <button onClick={increaseVar}>Var Up!</button>
          <button onClick={increaseState}>State Up!</button>
          <button onClick={increaseRef}>Ref Up!</button>
          <button onClick={doRender}>Render!</button>
        </div>
      </header>
  </div>
  );
}

export default App;

• 위 코드를 실행하면 Var는 아무리 눌러도 누를땐 올라가지만 render 버튼을 누르면 0으로 초기화가 된다.
• useState의 경우 변화가 생길때마다 렌더링이 되며 렌더링 될 때 현재 ref의 값도 같이 렌더링이 된다.
• useRef의 경우 값이 Ref Up 버튼을 누르면 값이 계속 증가하고 Render 버튼을 눌러 다시 렌더링을 하면 증가된 값이 초기화되지 않고 유지되어 화면에 출력이 된다.