React 공식문서 -useRef

- useRef : 렌더링에 필요하지 않은 값을 참조할 수 있는 React 훅

- useRef의 매개변수에는 초기값(initialValue)을 지정할 수 있는데, 이는 ref 객체의 current 프로퍼티 초기 설정값이며 어떤 유형의 값이든 지정할 수 있다. 

- useRef는 단일 프로퍼티를 가진 객체를 반환한다.

- ref 객체를 JSX 노드의 ref 속성으로 React에 전달하면 React는 current 프로퍼티를 설정한다.

 

- ref는 state와 달리 변경하더라도 리렌더링을 촉발하지 않는다.

 

* 렌더링 중에는 ref.current를 쓰거나 읽지 마세요.

- React는 컴포넌트의 본문이 순수 함수처럼 동작하기를 기대한다.

- 입력값들(props, state, context)이 동일하면 완전히 동일한 JSX를 반환해야 한다.

// 렌더링중에 ref를 읽거나 쓰는 경우
function MyComponent() {
  // ...
  // 🚩 Don't write a ref during rendering
  // 🚩 렌더링 중에 ref를 작성하지 마세요.
  myRef.current = 123;
  // ...
  // 🚩 Don't read a ref during rendering
  // 🚩 렌더링 중에 ref를 읽지 마세요.
  return <h1>{myOtherRef.current}</h1>;
}

// 렌더링 중이 아닌 이벤트 핸들러나 Effect에서 ref를 읽거나 쓰는 경우
function MyComponent() {
  // ...
  useEffect(() => {
    // ✅ You can read or write refs in effects
    // ✅ Effect에서 ref를 읽거나 쓸 수 있습니다.
    myRef.current = 123;
  });
  // ...
  function handleClick() {
    // ✅ You can read or write refs in event handlers
    // ✅ 이벤트 핸들러에서 ref를 읽거나 쓸 수 있습니다.
    doSomething(myOtherRef.current);
  }
  // ...
}

---

I can't get a ref to a custom component(커스텀 컴포넌트에 대한 ref를 얻을 수 없습니다)

- 커스텀 컴포넌트에 ref를 전달하고자하면 오류가 발생한다.

- 이런 경우, forwardRef를 사용할 수 있다.

// 커스텀 컴포넌트에 ref 사용 불가
const inputRef = useRef(null);

return <MyInput ref={inputRef} />;

// forwardRef 사용
import { forwardRef } from 'react';

const MyInput = forwardRef(({ value, onChange }, ref) => {
  return (
    <input
      value={value}
      onChange={onChange}
      ref={ref}
    />
  );
});

export default MyInput;

 

---

* 참고 : React 공식문서(https://react-ko.dev/learn)