useRef

useRef

• useRef는 .current 프로퍼티로 전달된 인자로 초기화된 변경가능한 ref 객체를 반환한다. 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지될 것

• useRef는 리액트 Hook의 한 종류로 Ref는 reference의 줄임말이다.

• useRef를 이용하면 특정한 DOM 요소에 접근할 때 불필요한 리렌더링이 발생하지 않는다는 장점이 있다.

• 즉, useRef는 useState와 같이 값을 저장하는 변수로 사용되지만 state 처럼 값이 변경될 때 마다 리렌더링이 발생하지는 않는다는 것이다.

• 그렇다면 JS 변수와는 어떤 차이점이 있을까??

• js 변수는 리렌더링이 발생하면 값이 계속 초기화되지만, useRef를 사용하면 리렌더링이 되더라도 값을 계속 저장하기 때문이다.

• 이제 2가지 경우를 예제 코드로 살펴보자.

예제 1 'useRef' 를 사용하여 DOM 요소에 접근하기

• 이 예제에서는 useRef 를 사용하여 특정 DOM 요소를 참조하고 버튼 클릭 시 해당 요소에 포커스를 설정하도록 하였다.

import React, { useRef } from 'react';

function InputFocus() {
  // useRef로 초기화된 inputRef를 생성
  const inputRef = useRef(null);

  const handleFocus = () => {
    // current 프로퍼티를 통해 input 요소에 접근
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} type="text" placeholder="클릭하면 포커스가 이동합니다." />
      <button onClick={handleFocus}>입력란에 포커스</button>
    </div>
  );
}

export default InputFocus;

• 버튼을 클릭하면 handleFocus 함수가 실행되면서, useRef 에 focus가 가능하다.

예제 2: useRef 를 사용하여 리렌더링 없이 값 유지하기

• 이 예제에서는 useRef를 사용하여 버튼 클릭 횟수를 카운트하지만, useState 와 달리 리렌더링 없이 값을 유지한다.

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

function ClickCounter() {
  // useRef로 초기화된 countRef를 생성
  const countRef = useRef(0);
  const [renderCount, setRenderCount] = useState(0);

  const handleClick = () => {
    // countRef의 current 값을 증가시킴
    countRef.current++;
    console.log(`버튼 클릭 횟수: ${countRef.current}`);
  };

  const handleRender = () => {
    // 컴포넌트를 리렌더링
    setRenderCount(renderCount + 1);
  };

  return (
    <div>
      <button onClick={handleClick}>클릭 횟수 증가</button>
      <button onClick={handleRender}>리렌더링</button>
      <p>리렌더링 횟수: {renderCount}</p>
      <p>콘솔에서 클릭 횟수를 확인하세요.</p>
    </div>
  );
}

export default ClickCounter;

• 위 예제에서는 countRef 라는 useRef훅을 사용하여 버튼 클릭 횟수를 저장한다.
  handleClick 함수가 호출될 때마다 countRef,current 값이 증가하지만, 이 값의 변경은 컴포넌트를 리렌더링 하지 않고,

• 리렌더링이 발생하는 경우에도 값이 계속해서 유지되는 것을 볼 수 있다.

---

장점

• 자주 변경되는 값을 state에 담으면 리렌더링도 자주 일어나기 때문에 성능에 부정적인 영향을 미칠 수 있지만, useRef를 이용하면 값이 변경될 때마다 렌더링이 일어나지 않는다.