React에서 Ref 전달하기

이 기사에서는 Forwarding Refs라는 Refs에 대한 또 다른 개념에 대해 설명합니다. 그러나 Forwarding Refs를 이해하기 전에 먼저 ref가 무엇인지, 왜 사용해야 하는지, 어떻게 생성하는지 이해해야 합니다. 이전 기사에서 나는 이미 Ref가 무엇인지, 그리고 반응에서 ref를 생성하는 다양한 방법에 대해 논의했습니다. 심판에 대해 모른다면 여기에서 내 기사를 읽을 수 있습니다.

React에서 Refs를 생성하는 다양한 방법

Sumit Kharche ・ 2020년 2월 1일 ・ 4분 읽기

#react #webdev #javascript #beginners

자식 구성 요소의 DOM 요소에 액세스하기 위해 부모 구성 요소에서 자식 구성 요소로 ref를 전달해야 하는 일부 상황에서 반응 앱을 작성하는 동안. 우리는 소품의 도움으로 반응 데이터가 위에서 아래로 흐른다는 것을 알고 있습니다. 따라서 자식 구성 요소의 동작을 변경해야 하는 경우 부모에서 자식으로 소품을 전달할 수 있습니다.

Reactdocumentation에 따르면:

Ref forwarding is a technique for automatically passing a ref through a component to one of its children. This is typically not necessary for most components in the application. However, it can be useful for some kinds of components, especially in reusable component libraries.

TL; DR

Source code

React.forwardRef()로 Ref 전달하기

동일한 방식으로 하위 구성 요소에 소품을 사용하여 데이터를 전달하면 ref도 전달할 수 있습니다. 따라서 먼저 아래와 같이 두 개의 구성 요소를 만듭니다.

import React, { Component } from "react";
import Input from "./Input";

export default function CreateRefApiExample() {
  return (
    <div style={{ border: "1px solid red", width: "400px" }}>
      <b>Parent Component</b>
      <br />
      <br />
      <Input />
      <button style={{ margin: "8px" }}>Click!</button>
    </div>
  );
}

CreateRefApiExample은 상위 구성 요소입니다.

import React from "react";

export default function Input() {
  return (
    <div style={{ border: "1px solid green", width:"300px", margin:"16px" }}>
      Child Component
      <br />
      Name: <input type="text" style={{ margin: "32px 0 32px 0" }} />
    </div>
  );
}

입력은 자식 구성 요소입니다. 따라서 코드를 실행하면 아래와 같이 됩니다.



Input component is the child component to the CreateRefApiExample이 표시되는 경우. 이제 우리가 원하는 것은 CreateRefApiExample, 즉 부모 구성 요소에서 클릭 버튼을 클릭할 때 입력 구성 요소의 입력 필드에 초점을 맞추는 것입니다.

이를 달성하기 위해 부모 구성 요소에 ref를 생성하고 자식 구성 요소에 전달해야 하며 사용자가 버튼을 클릭하면 포커스를 입력해야 합니다.

먼저 React.createRef() api를 사용하여 부모 구성 요소에 ref를 생성해 보겠습니다.

 let inputRef = React.createRef();

하위 구성 요소로 전달합니다.

import React, { Component } from "react";
import Input from "./Input";

export default function CreateRefApiExample() {
  let inputRef = React.createRef();

  return (
    <div style={{ border: "1px solid red", width: "400px" }}>
      <b>Parent Component</b>
      <br />
      <br />
      <Input ref={inputRef} />
      <button style={{ margin: "8px" }}>Click!</button>
    </div>
  );
}

다음 단계는 입력 구성 요소에서 이 ref를 수신하고 input 태그에 할당하는 방법입니다. 이는 React.forwardRef() API를 사용하여 수행할 수 있습니다. 먼저 입력 구성 요소를 React.forwardRef 함수로 래핑하여 이 구성 요소에 전달한 ref에 대한 액세스 권한을 제공합니다.

import React from "react";

export default React.forwardRef(function Input(props, ref) {
  return (
    <div style={{ border: "1px solid green", width:"300px", }}>
      Child Component
      <br />
      Name: <input 
              type="text"
              ref={ref} 
              style={{ margin: "32px 0 32px 0" }} />
    </div>
  );
})

ref는 props의 일부가 아니며 React.forwardRef() API로 인해 props와 함께 별도의 매개변수로 전달됩니다.

이 시점에서 새 참조inputRef를 생성하여 입력 구성 요소로 전달했습니다. 이제 다음 단계는 부모 구성 요소의 ref에 액세스하고 사용자가 버튼을 클릭할 때 포커스 이벤트를 트리거하는 것입니다.

아래와 같이 onClick 핸들러 함수를 생성합니다.

 const handleClick = () => {
    inputRef.current.focus();
  };

버튼onClick 이벤트에 바인딩합니다.

import React, { Component } from "react";
import Input from "./Input";

export default function CreateRefApiExample() {
  let inputRef = React.createRef();

  const handleClick = () => {
    inputRef.current.focus();
  };

  return (
    <div style={{ border: "1px solid red", width: "400px" }}>
      <b>Parent Component</b>
      <br />
      <br />
      <Input ref={inputRef} />
      <button style={{ margin: "8px" }} onClick={handleClick}>
        Click!
      </button>
    </div>
  );
}

애플리케이션을 실행하고 출력을 확인합니다.


useRef() 후크를 사용하여 이와 동일한 작업을 수행할 수도 있습니다. 후크로 시도하려면 ref API 대신 useRef()를 사용하여 React.createRef()를 만들고 다른 코드는 동일하게 유지합니다.

import React, { useRef } from "react";
import Input from "./Input";

export default function CreateRefApiExample() {
  //let inputRef = React.createRef();

  let inputRef = useRef(null);

  const handleClick = () => {
    inputRef.current.focus();
  };

  return (
    <div style={{ border: "1px solid red", width: "400px" }}>
      <b>Parent Component</b>
      <br />
      <br />
      <Input ref={inputRef} />
      <button style={{ margin: "8px" }} onClick={handleClick}>
        Click!
      </button>
    </div>
  );
}

결론

이 기사에서는 React JS의 Forwarding Refs에 대해 설명하고 ref를 사용하여 간단한 예제를 만들었습니다.

이 기사가 마음에 드셨기를 진심으로 바랍니다. 제가 더 잘할 수 있었던 부분에 대한 생각이나 의견을 주저하지 말고 보내주십시오.

당신은 트위터에서 나를 따라갈 수 있습니다

행복한 코딩!