[React] useRef & forwardRef

1. useRef ?

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

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

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

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;

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

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 사용 예시 코드

React에서는 일반적으로 props를 통해 자식 컴포넌트에 ref를 전달할 수 없습니다.

이는 ref가 props가 아니라 특별한 속성이기 때문입니다.

forwardRef를 사용하지 않았을 경우 ⇒ 에러 발생

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

// forwardRef를 사용하여 ref를 받아 input 요소에 전달
const MyInput = return (
  <input ref={ref} type="text" />
);

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

  useEffect(() => {
    myRef.current.focus(); // MyInput의 input 요소에 직접 접근
  }, []);

  return <MyInput ref={myRef} />;
}

export default App;

forwardRef를 사용하여 ref를 두 번째 인자로 받을 수 있습니다.

아래 처럼 forwardRef를 사용하면 에러는 없어지게됩니다.

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

// forwardRef를 사용하여 ref를 받아 input 요소에 전달
const MyInput = React.forwardRef((props, ref) => (
  <input ref={ref} type="text" />
));

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

  useEffect(() => {
    myRef.current.focus(); // MyInput의 input 요소에 직접 접근
  }, []);

  return <MyInput ref={myRef} />;
}

export default App;

forwardRef 사용 예시 코드2

app.jsx

import { useEffect, useRef } from "react";
import MyInput from "./MyInput";

export default function App() {
  const inputRef = useRef(null);

  useEffect(() => {
    inputRef.current.focus();
  }, []);
  return <MyInput type="text" placeholder="여기에 포커스" ref={inputRef} />;
}

MyInput.jsx

아래 코드에서 상위 부모 컴포넌트로 부터 ref를 전달받기 위해 forwardRef를 사용하였습니다.

import React from "react";
// ref를 전달받기 위해 forwardRef 사용
const MyInput = React.forwardRef((props, ref) => {
  return (
		<input type={props.type} placeholder={props.placeholder} ref={ref} />
	);
});

export default MyInput;