[React] React Hook_useRef

 

useRef

렌더링을 유발하지 않는 값을 저장하는 변수이다. 본질적으로는 .current 프로퍼티에 변경 가능한 값을 담고 있는 상자와 같다고 생각하면 된다.

• 값을 참조하거나
• DOM을 조작하거나
• 참조값의 재생산을 방지하는

역할을 한다. 특징들을 종합적으로 살펴보았을 때 참조 값이 갱신되어도 컴포넌트가 리렌더링 되거나 갱신을 알 수 있는 어떤 동작이 이루어지지 않는다는 것을 알 수 있다.

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    // `current` points to the mounted text input element
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

위 코드를 살펴보면 버튼을 클릭했을 때 input 박스에 focus 효과가 적용된다는 것을 알 수 있고, .current.value를 조회하면 input 박스 안에 입력된 값도 출력할 수 있다. 결국 ref에 저장된 것이 input 노드 그 자체이며 이를 통해 다양한 조작들을 할 수 있다는 것이다.

 

주의점 

단일 컴포넌트에 직접 ref를 전달하면 에러가 발생한다. 단일 컴포넌트는 그 내부의 DOM노드에 ref를 노출하지 않기 때문.

//📌Don't
const inputRef = useRef(null);
return <MyInput ref={inputRef} />;

//✅Do
import { forwardRef } from 'react';

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

export default MyInput;

ref를 얻으려는 컴포넌트를 forwardRef로 감싸 사용해야 한다.