1. useRef ?

React의 Hook 중 하나로, React 컴포넌트 내에서 가변적(mutable)인 값을 안전하게 보관할 수 있게 해줍니다. 이 Hook은 .current 프로퍼티를 가진 변경 가능한(ref) 객체를 반환합니다. 반환된 객체는 컴포넌트의 전체 수명주기 동안 유지됩니다.

useRef는 저장공간 또는 DOM요소에 접근하기 위해 사용되는 React Hook입니다.

useRef는 주로 두 가지 경우에 사용됩니다.

1. DOM 요소에 직접 접근할 때

useRef를 사용하여 생성된 ref를 JSX 요소에 연결하면, 해당 요소에 직접 접근할 수 있습니다. 이를 통해 특정 DOM 요소를 직접 조작하거나, 요소의 속성을 읽어올 수 있습니다.

function App() {
  const myRef = useRef(null);

  const handleClick = () => {
    myRef.current.focus(); // DOM 요소에 직접 접근하여 focus 메소드를 호출
  };

  return (
    <div>
      <input ref={myRef} type="text" />
      <button onClick={handleClick}>Focus the input</button>
    </div>
  );
}

export default App;

2. 컴포넌트 내에서 변경될 수 있는 값을 보관할 때

useRef를 사용하여 생성된 ref의 .current 프로퍼티는 변경될 수 있는 값이며, 이 값을 변경해도 컴포넌트가 리렌더링되지 않습니다. 따라서 이를 이용해 컴포넌트의 렌더링 사이에서도 유지되어야 하는 값을 보관할 수 있습니다.

function App() {
  const counterRef = useRef(0);

  const handleClick = () => {
    counterRef.current++; // 값 변경
    console.log(`Button clicked ${counterRef.current} times`);
  };

  return (
    <div>
      <button onClick={handleClick}>Increase counter</button>
    </div>
  );
}

export default App;

2. forwardRef ?

React 기능 중 하나로, 보통은 자식 컴포넌트에게 ref를 전달하기 위해 사용합니다. 이를 통해 부모 컴포넌트가 자식 컴포넌트의 DOM 요소에 직접 접근할 수 있게 해줍니다.

일반적으로 React 컴포넌트의 속성(props)을 통해 ref를 전달하는 것은 불가능합니다. 이는 ref가 React에 의해 특별하게 처리되기 때문입니다. 하지만 forwardRef를 사용하면 이 문제를 해결할 수 있습니다.

forwardRef를 사용하여 컴포넌트를 생성하면, 해당 컴포넌트는 ref를 받아서 자식 DOM 요소에게 전달하는 역할을 할 수 있습니다.

forwardRef 사용 예시 코드