[영어 개발문서 읽기 스터디] React 가이드: Manipulating the DOM with refs.

https://react.dev/learn/manipulating-the-dom-with-refs

Manipulating the DOM with Refs – React

- 디자인 시스템에서 낮은 레벨의 컴포넌트들(버튼, 인풋 등등)은 그들의 DOM nodes를 이용하는 것이 흔하다.
그러나 높은 레벨의 컴포넌트(form, list, 페이지 section 등)은 그들의 DOM 노드를 노출하는 것을 피한다.(의도하지 않은 의존성을 피하기 위해서이다.)

useImperativeHandle(): forwardRef을 이용해 자식 컴포넌트에 있는 요소에 ref을 주기 위해 사용함.
다음과 같이 사용한다.

코드 전문 보기

import {
  forwardRef, 
  useRef, 
  useImperativeHandle
} from 'react';

const MyInput = forwardRef((props, ref) => {
  const realInputRef = useRef(null);
  useImperativeHandle(ref, () => ({
    // Only expose focus and nothing else
    focus() {
      realInputRef.current.focus();
    },
  }));
  return <input {...props} ref={realInputRef} />;
});

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

  function handleClick() {
    inputRef.current.focus();
  }

  return (
    <>
      <MyInput ref={inputRef} />
      <button onClick={handleClick}>
        Focus the input
      </button>
    </>
  );
}

React에서 모든 '업데이트'는 2가지 방식으로 나뉜다.
- render하는 동안, React는 당신의 컴포넌트 중 screen에 떠야 하는 것을 호출한다.
- commit 하는 동안, React는 DOM에 변화를 적용한다.

일반적으로 당신은 rendering하는 동안 ref에 접근하기를 원하지 않을 것이다. ref이 DOM 노드에 붙는 행위도 마찬가지이다.
첫번째로 render될 때 DOM 노드들은 아직 만들어지지 않았기 때문에 ref.current는 null이다. DOM을 업데이트한 이후에도 , DOM nodes는 아직 업데이트되지 않았다. 아직 그들을 읽어들이기에는 너무 이른 것이다.
React는 ref.current를 commit 하는 동안에 읽는다. DOM을 업데이트 하기 전에, React는 영향을 받은 ref.current를 null로 만들고 DOM을 업데이트한 후에 React는 즉시 그들에게 적합한 DOM node를 설정한다.

주로 당신은 ref를 event handler을 통해 접근할 것이다. 만약 당신이 ref을 갖고 무엇인가 하고 싶지만 특별히 이벤트가 그 안에 없다면, 우리는 다음 페이지에서 'effects'를 살펴보아야 한다.

flushSync(): DOM update가 setState보다 빠르게 발생한다 => 이를 방지하고자 flushSync로 감싼다. flushSync로 감싸게 되면 React에게 flushSync로 감싸진 code를 실행한 바로 이후에 DOM을 업데이트하도록 한다.

Ref은 좋은 탈출구이다. 당신은 ref을 React 외에서 생각해야 할 때에 사용해야만 한다.( focusing, scroll위치, 브라우저 API 호출 등 React가 드러내지 않는 것에서 말이다.)

당신이 만약 focusing이나 scrolling과 같이 비교적 변화를 덜 일으키는 액션에 집착한다면, 우리는 문제를 마주하지 않을 것이다. "
그러나 만일 당신이 DOM을 수동으로 수정하려 하면, 당신은 React가 만들 변화와 충돌의 위험을 맞게 될 것이다.
React에 의해 관리되는 DOM 노드를 바꾸려 하지 말자. 수정하거나, 자식노드를 추가하거나, 또는 리엑트로부터 관리되는 element로부터 node를 삭제하는 것은 예상치 못한 시각적 결과나 충돌을 야기할 수 있다.

그러나 이것은 당신이 그걸 아예 해선 안된다는 말은 아니다. React가 update할 이유가 없는 부분이라면, 당신은 안전하게 DOM의 일부를 바꿀 수 있다. 예를 들어, 어떤 <div>가 jsx에서 항상 비어있다면 React는 그 자식 리스트를 건드릴 이유가 없다. 따라서 , 수동으로 그곳의 요소를 추가하거나 제거하는 것은 안전하다.

복습하기

- Ref은 포괄적인 개념이지만,주로 DOM 요소에 붙어 관리하기 위해 사용된다.
- 당신은 <div ref={myRef}> 이런 식으로 DOM node에 붙여서 myRef.current를 사용할 수 있다.
- 주로 당신은 ref을 변화를 일으키지 않는 행동(focusing, scrollinh, measuring DOM elements등)에 사용할 수 있다
- 리액트 컴포넌트는 DOM node를 기본적으로 노출시키지 않습니다. 당신은 컴포넌트에서 DOM node를 사용하기 위해 forwardRef을 사용하고 두번째 ref 인자를 자식 컴포넌트의 노드로 보내줘야 합니다.
- React에 의해 관리되는 DOM 노드를 바꾸지 않도록 주의합니다.
- React에 의해 바뀔 일이 없는 DOM 노드라면, 수정해도 안전합니다.