[Ch9] Refs: from storing data to imperative API

이번 장에서는 React에서 DOM에 직접 접근해야 할 때 사용하는 도구인 Ref에 대해 다룬다.

React의 큰 장점 중 하나는 실제 DOM을 직접 다루는 복잡한 과정을 개발자가 신경 쓰지 않아도 되도록 추상화해 준다는 점이다.  getElementById로 DOM 요소를 찾고, 클래스를 수동으로 추가하거나, 브라우저 간의 차이를 처리하는 일 없이, 컴포넌트를 작성하는 것만으로 UI를 구축할 수 있다. 하지만 포커스를 주거나, 요소를 스크롤하거나, 사이즈를 계산하는 등의 특정 작업에서는 실제 DOM에 직접 접근해야 하는 경우가 생기는데, 이때 필요한 도구가 바로 Ref다.

Ref vs State

결론부터 말하면 Ref는 값을 저장하지만, 그 값이 바뀐다고 해서 컴포넌트가 리렌더링 되진 않는다. 반면 state는 값이 바뀌면 리렌더링을 트리거한다. 그래서 화면에 무언가 보여주거나, 다른 컴포넌트로 값을 전달해야 한다면 state를 써야 하고, 단순히 내부에서 저장만 할 거라면 Ref가 적합하다.

const Form = () => {
  const ref = useRef();
  const onChange = (e) => {
    ref.current = e.target.value;
  };
  const submit = () => {
    console.log(ref.current);
  };

  return (
    <>
      <input type="text" onChange={onChange} />
      <button onClick={submit}>submit</button>
    </>
  );
};

 

위 예제는 Ref를 통해 값을 저장하고 제출 시점에 사용하는데, 만약 화면에 값을 렌더링해야 한다면 Ref만으로는 안 되고 State를 사용해야 한다.

const numberOfLetters = ref.current?.length ?? 0;

 

만약 위와 같이 화면에 보여주면 Ref는 값이 변해도 React가 다시 렌더링 하지 않기 때문에 numberOfLetters 값은 항상 0으로 보인다.

비슷한 맥락으로 Ref 값을 props로 하위 컴포넌트에 전달하는 것도 동작하지 않는다.

또 하나 중요한 점은 Ref는 동기적으로 값이 반영되고, state는 비동기적으로 동작한다는 점이다.

  const onChange = (e) => {
    console.log("state before:", value);
    setValue(e.target.value);
    console.log("state after:", value); // 이전 값

    console.log("ref before:", ref.current);
    ref.current = e.target.value;
    console.log("ref after:", ref.current); // 바로 반영됨
  };

  return (
    <div style={{ padding: 20 }}>
      <input type="text" onChange={onChange} placeholder="타이핑 해보세요" />
    </div>
  );

 

crus라고 입력된 상태에서 h를 입력하면, Ref는 crush로 바로 반영되지만, State는 여전히 crus인 상태로 콘솔에 찍힌다.
ref.current는 동기적으로 바로 업데이트되고, useState는 다음 렌더링 전까지 값이 유지되기 때문이다.

Ref를 자식 컴포넌트에 전달하기 (forwardRef)

Ref를 다른 컴포넌트에 전달하려면 props처럼 넘기면 안 되고 forwardRef를 사용하면 부모 컴포넌트에서 자식 컴포넌트의 input DOM에 직접 접근할 수 있다.

const InputField = forwardRef((props, ref) => {
  return <input ref={ref} />;
});

const Form = () => {
  const inputRef = useRef(null);

  return <InputField ref={inputRef} />;
};

 

imperative API 구성하기 (useImperativeHandle)

예를 들어, 에러 상황에서 input을 흔들어 사용자에게 시각적으로 알리는 기능을 구현해야 한다고 해보자. 이런 동작은 단순히 상태만으로는 처리하기 어려우며, 부모 컴포넌트가 자식 컴포넌트의 메서드를 직접 호출해야 하는데, 이때 필요한 것이 바로 imperative API다.

useImperativeHandle 은 imperative API를 구성할 수 있게 해주는 React 훅인데, 자식 컴포넌트는 해당 훅을 통해 외부에 필요한 메서드만 선택적으로 노출할 수 있고, 부모 컴포넌트는 해당 메서드를 직접 호출할 수 있다. 이렇게 하면 내부의 DOM 구조나 구현 세부사항은 감춘 채, 필요한 동작만 외부에 안전하게 제공할 수 있다는 점에서 의미가 있다.

const InputField = ({ apiRef }) => {
  const inputRef = useRef(null);
  const [shouldShake, setShouldShake] = useState(false);

  useImperativeHandle(apiRef, () => ({
    focus: () => inputRef.current.focus(),
    shake: () => setShouldShake(true),
  }), []);

  return (
    <input
      ref={inputRef}
      className={shouldShake ? 'shake-animation' : ''}
      onAnimationEnd={() => setShouldShake(false)}
    />
  );
};

 

부모 컴포넌트에서는 아래와 같이 사용이 가능하다.

const Form = () => {
  const inputRef = useRef(null);
  const [name, setName] = useState('');

  const onSubmitClick = () => {
    if (!name) {
      inputRef.current.focus();
      inputRef.current.shake();
    } else {
      // submit logic
    }
  };

  return (
    <>
      <InputField apiRef={inputRef} onChange={setName} />
      <button onClick={onSubmitClick}>Submit the form!</button>
    </>
  );
};

 

근데 꼭 useImperativeHandle을 써야 하는 건 아니다. useEffect 안에서 ref에 직접 함수 객체를 할당해도 똑같이 작동한다.

const InputField = ({ apiRef }) => {
  const inputRef = useRef(null);

  useEffect(() => {
    apiRef.current = {
      focus: () => inputRef.current.focus(),
      shake: () => {/* setState 등 */},
    };
  }, [apiRef]);

  return <input ref={inputRef} />;
};

 

다만 useImperativeHandle을 사용하는 이유는 다음과 같다.

• 명확한 의도 표현: 이 컴포넌트가 외부에 특정 명령형 API를 제공한다는 것을 코드만 봐도 알 수 있다.
• 불필요한 재할당 방지: useEffect 방식은 의존성 배열에 따라 API 객체가 리렌더링마다 재생성될 수 있는데, useImperativeHandle은 이런 불필요한 할당을 방지하는 데 더 적절하다.

단순히 동작하게 만드는 것만 목적이라면 useEffect로도 충분하지만, 의도를 명확히 하고 컴포넌트의 캡슐화를 유지하고자 한다면 useImperativeHandle을 사용하는 것이 더 안전하고 권장되는 방식이라고 한다.

느낀 점

나도 스크롤 위치를 계산하거나 유동적인 width 값을 처리할 때 ref를 사용했었는데, 이번 장을 읽으며 다시 한번 ref의 역할과 적절한 사용방법을 명확하게 정리할 수 있어 좋았다.

정리하자면

• 렌더링에 영향을 주는 값이라면 무조건 state를 쓰자.
• 외부에 노출되면 안 되는 내부 동작은 useImperativeHandle로 감출 수 있다.
• 단순히 저장만 하거나 특정 시점에만 동작을 트리거하는 값은 ref가 적합하다.

그리고, 공식 문서에서도 ref 사용 시 다음과 같은 주의사항을 명확히 명시하고 있다.

ref를 과도하게 사용하지 마세요. ref는 props로 표현할 수 없는 필수적인 행동에만 사용해야 합니다. 예를 들어 특정 노드로 스크롤하기, 노드에 초점 맞추기, 애니메이션 촉발하기, 텍스트 선택하기 등이 있습니다.

prop으로 표현할 수 있는 것은 ref를 사용하지 마세요. 예를 들어 Modal 컴포넌트에서 { open, close }와 같은 imperative handle을 노출하는 대신 <Modal isOpen={isOpen} />과 같은 isOpen prop을 사용하는 것이 더 좋습니다. Effects를 사용하면 prop을 통해 명령형 동작(imperative behavior)을 노출할 수 있습니다.