useRef

useRef는 React Hooks 중 하나로, 컴포넌트에서 DOM 요소나 변수를 관리하는 데 사용됩니다. 주로 다음과 같은 목적으로 활용됩니다:

DOM 요소 접근: useRef를 사용하여 컴포넌트 내에서 생성된 DOM 요소에 접근하고 조작할 수 있습니다.

변수 유지: 컴포넌트 리렌더링과 관계없이 변수 값을 유지하고 싶을 때 useRef를 활용합니다.

변수 변경 시 리렌더링 방지: useRef로 저장한 변수는 변경되어도 컴포넌트가 리렌더링되지 않아 성능을 최적화할 수 있습니다.

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

function ExampleComponent() {
  const inputRef = useRef(null); // DOM 요소에 접근하기 위한 useRef
  const countRef = useRef(0);    // 변수 유지를 위한 useRef

  useEffect(() => {
    countRef.current += 1;       // 변수 변경 시 리렌더링 방지
    console.log('Count:', countRef.current);
  }, []);

  const focusInput = () => {
    inputRef.current.focus();     // DOM 요소 접근 및 조작
  };

  return (
    <div>
      <input ref={inputRef} />
      <button onClick={focusInput}>Focus Input</button>
    </div>
  );
}

export default ExampleComponent;

위의 코드 예시에서 useRef는 inputRef를 통해 입력 요소에 접근하고, countRef를 통해 카운트를 유지하며, 이러한 동작이 리렌더링을 피하고 성능을 향상시킬 수 있습니다.