React Tips — Render Props 및 Forward Refs

https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62에서 Amazon에서 내 책을 확인하십시오.

지금 http://jauyeung.net/subscribe/에서 내 이메일 목록을 구독하십시오.

React는 현대적인 대화형 프론트 엔드 웹 앱을 빌드하는 데 가장 많이 사용되는 프론트 엔드 라이브러리입니다. 모바일 앱을 구축하는 데에도 사용할 수 있습니다.

이 기사에서는 렌더 소품을 사용하여 사물을 유연하게 렌더링하고 ref를 전달하는 ref와 함께 자식에게 전달하는 구성 요소를 만드는 방법을 살펴보겠습니다.

렌더 소품

Render prop은 render 함수를 prop으로 전달하는 패턴입니다. 패턴을 사용하기 위해 props에서 render 함수를 호출하는 구성 요소를 만듭니다. 그런 다음 다른 구성 요소에서 render 를 호출하는 구성 요소에 대한 값으로 함수와 함께 render 소품을 전달합니다.

예를 들어 다음 코드를 작성할 수 있습니다.

import React from "react";

const RenderComponent = ({ render }) => {
  const [foo] = React.useState("foo");
  const [bar] = React.useState("bar");

  return render({
    foo,
    bar
  });
};

export default function App() {
  return (
    <>
      <RenderComponent
        render={({ foo, bar }) => (
          <p>
            {foo} {bar}
          </p>
        )}
      />
      <RenderComponent
        render={({ foo, bar }) => (
          <p style={{ color: "green" }}>
            {foo} {bar}
          </p>
        )}
      />
    </>
  );
}

위의 코드에는 props에서 전달된 RenderComponent 함수를 호출하는 render가 있습니다. 단지 render 내부의 상태와 함께 props에서 전달된 RenderComponent  함수를 호출합니다.

그런 다음 App  에서 RenderComponent 소품이 각각 다른 기능을 설정하여 render를 두 번 참조했습니다.

따라서 'foo bar'가 두 번 표시되고 두 번째는 녹색으로 표시되어야 합니다.

이는 코드를 반복하지 않고 동일한 상태에서 데이터를 다르게 형식화하는 데 유용합니다.

앞으로 참조

참조를 전달한다는 것은 상위 구성 요소에서 하위 구성 요소의 참조를 가져오는 것을 의미합니다.

예를 들어 사용자 정의 버튼 구성 요소에 있는 버튼의 참조를 얻으려면 다음 코드를 작성할 수 있습니다.

import React, { useEffect } from "react";

const FancyButton = React.forwardRef((props, ref) => (
  <button ref={ref}>{props.children}</button>
));

export default function App() {
  const buttonRef = React.createRef();

  useEffect(() => {
    buttonRef.current.focus();
  }, []);

  return (
    <>
      <FancyButton ref={buttonRef}>Click me!</FancyButton>;
    </>
  );
}

위의 코드에는 액세스하려는 FancyButton 요소가 있는 button 구성 요소가 있습니다. App 또는 다른 구성 요소에서 액세스할 수 있도록 하기 위해 React.forwardRef 를 호출합니다. 이 호출은 props 및 ref 2개의 매개변수가 있는 콜백을 받습니다.
props에는 props가 있고 ref는 외부에서 액세스할 수 있는 ref입니다. ref prop을 ref 매개변수로 설정하여 ref를 버튼으로 설정합니다.

그런 다음 App  에서 buttonRef를 만들고 ref  에 전달합니다. 그런 다음 useEffect 콜백에서 buttonRef.current.focus();를 호출하여 App가 로드될 때 두 번째 인수로 빈 배열이 있으므로 버튼에 초점을 맞춥니다.

전달 참조는 타사 구성 요소에도 사용됩니다. 예를 들어 react-hook-form 패키지를 사용해야 하고 자체 사용자 지정 입력 제어 구성 요소를 사용하는 경우 다음과 같이 forwardRef를 호출해야 합니다.

import React from "react";
import { useForm } from "react-hook-form";

const Select = React.forwardRef(({ label }, ref) => (
  <>
    <label>{label}</label>
    <select name={label} ref={ref}>
      <option value="10">10</option>
      <option value="20">20</option>
    </select>
  </>
));

export default function App() {
  const { register, handleSubmit } = useForm();

  const onSubmit = () => {};

  return (
    <>
      <form onSubmit={handleSubmit(onSubmit)}>
        <Select label="Age" ref={register} />
        <input type="submit" />
      </form>
    </>
  );
}

위의 코드에서 Select라는 사용자 지정 선택 컨트롤을 만들었습니다. 이 컨트롤은 forwardRef를 두 번째 매개변수로 사용하는 콜백으로 ref를 호출하여 생성되며, ref prop의 값으로 설정합니다. 선택 요소에서.

그런 다음 App  에서 select의 ref에 액세스할 수 있습니다.

결론

Render props는 render 함수를 prop으로 자식 컴포넌트에 전달하는 패턴입니다. 자식 구성 요소에는 render 소품에 전달한 함수에 의해 렌더링된 상태가 있습니다.

그런 다음 다른render 함수를 사용하여 해당 자식 구성 요소를 여러 번 참조할 수 있습니다.

참조를 전달하면 부모 내에서 자식 구성 요소의 요소 참조에 액세스할 수 있습니다. 이것은 기존 HTML 요소를 사용자 정의하는 데 사용되는 사용자 정의 구성 요소에 유용합니다.