TypeScript와 반응하여 forwardRef 사용

1. React에서 refs는 무엇입니까
2. React에서 forwardRef가 필요한 이유
3. React 및 TypeScript의 forwardRef
4. TypeScript에서 forwardRef 사용

최근 몇 년 동안 점점 더 많은 개발자가 React와 TypeScript를 함께 사용하고 있습니다. 작업 설명은 TypeScript를 React와 함께 사용하는 것이 유행이 아니라 현재이자 미래임을 더욱 확인할 수 있습니다.

웹 개발자는 코드를 보다 체계적으로 만들고 오류의 여지를 줄이며 디버깅 시간을 절약하기 위해 TypeScript 작성을 선호합니다.

이 문서에서는 자식 구성 요소에서 부모로 ref를 전달하는 방법에 대해 설명합니다.

React에서 refs는 무엇입니까

일반적으로 DOM React 요소의 모양은 state 또는 props 객체의 변경에 따라 변경됩니다. 그러나 React에서는 여전히 특정 DOM 요소를 캡처하고 필요할 때 명령적으로 수정할 수 있습니다.

React의 Ref(참조의 줄임말)는 개발자가 DOM 요소에 액세스하고 조작할 수 있도록 합니다.

React 16.8부터 React 개발자는 useRef 후크를 사용하여 후크를 만들 수 있습니다. 다음은 예입니다.

function App() {
  let inputRef = useRef();
  return (
    <div className>
        <input ref={inputRef} type="text" />
    </div>
  );
}

여기에서 inputRef 변수를 생성하고 이를 ref로 초기화합니다.

그런 다음 JSX에서 <input> 요소를 찾고 이전에 생성한 변수에 ref 속성을 설정합니다. 이제 이 요소에 대한 참조가 변수에 저장됩니다.

Ref는 종종 DOM 요소를 직접 애니메이션화하는 데 사용됩니다. 일반적으로 요소가 집중되거나 선택되거나 명령적으로 애니메이션을 트리거할 때 테두리를 강조 표시합니다.

React에서 forwardRef가 필요한 이유

일반적으로 참조를 생성한 동일한 구성 요소에서 참조에 액세스합니다.

그러나 때로는 부모 구성 요소의 DOM 요소 중 하나에 대한 ref를 정의하고 자식 구성 요소로 전달해야 합니다. 이것이 forwardRef 기능이 필요한 이유입니다.

React 및 TypeScript의 forwardRef

때로는 상위 구성 요소의 하위 구성 요소에서 요소에 액세스해야 합니다. 예를 들어 <div> 요소를 포함하는 <Message> 구성 요소가 있고 상위 <Messenger> 구성 요소에서 액세스하려고 한다고 가정해 보겠습니다.

function Message({messageText}) {
    return <div>{messageText}</div>;
}

초점이 맞을 때 상자를 강조 표시하고 싶을 수도 있습니다. 이를 수행하는 유일한 방법은 상위 구성 요소에서 ref를 생성하는 것입니다. 그런 다음 요소에 초점이 있는지 확인하고 조건부로 강조 표시할 수 있습니다.

function App() {
  const input = React.useRef<HTMLElement>(null);

  React.useEffect(() => {
    if (input.current) {
      input.current.focus();
    }
  }, []);

  return <Message messageText="hello world" ref={input} />;
}

그러나 부모 구성 요소가 자식 구성 요소에 포함된 HTML 요소에 직접 액세스할 수 없기 때문에 오류가 발생합니다. 대신 forwardRef를 사용합니다.

자식 구성 요소를 정의할 때 다음과 같이 변경해야 합니다.

const Message = React.forwardRef((props, ref) => {
    return <div ref={ref}>{props.messageText}</div>;
});

React의 forwardRef 기능은 <div> 요소를 부모가 사용할 수 있도록 합니다. forwardRef 함수에서 전체 구성 요소를 래핑합니다.

Message 변수에 저장할 수 있는 구성 요소를 반환합니다.

이번에는 부모 구성 요소가 자식 요소에 액세스합니다.

TypeScript에서 forwardRef 사용

이전 예제에서 ref 인스턴스를 생성하고 input 변수에 저장할 때 유형을 <HTMLElement>로 지정합니다.

function App() {
  const input = React.useRef<HTMLElement>(null);
	...
  return <Message messageText="hello world" ref={input} />;
}

<HTMLElement>는 React에서 DOM 요소에 대한 가장 일반적인 유형입니다. <div> 요소를 참조하는 경우 <HTMLDivElement>와 같은 보다 구체적인 유형을 사용할 수 있습니다.