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

React 앱을 작성하는 동안 우리는 항상 구성 요소 기반 아키텍처를 따르지만 DOM 요소를 조작하거나 명령적으로 수정해야 하는 상황이 있을 수 있습니다. 따라서 이 React를 달성하기 위해 Refs라는 것을 제공합니다. 간단히 말해서 ref는 기본 DOM 요소에 대한 액세스를 제공합니다.

아래의 Reactdocumentation에 따라 ref를 사용하는 가장 좋은 사용 사례는 다음과 같습니다.

• Managing focus, text selection, or media playback.
• Triggering imperative animations.
• Integrating with third-party DOM libraries.

참고: 앱의 모든 곳에서 참조를 사용하지 마세요. 선언적 방식을 사용하여 작업을 수행할 수 있는 경우 refs를 사용하지 마십시오.

이 기사에서는 몇 가지 예와 함께 리액션에서 ref를 생성하는 다양한 방법을 살펴보겠습니다. 이제 커피 한 잔을 들고 코딩을 시작해 봅시다.

TL; DR

Source code

그래서 오늘 우리는 React에서 ref를 생성하는 세 가지 방법에 대해 논의할 것입니다.

콜백 참조

React.creatRef() API 사용(React 16.3에서)

useRef() 후크 사용

콜백 참조

이름에서 알 수 있듯이 callback refs에서는 ref props에 콜백 함수를 제공해야 합니다. 따라서 함수는 응용 프로그램에서 나중에 사용할 수 있도록 변수에 저장할 수 있는 DOM 요소로 입력을 받습니다. 예를 들어 사용자가 버튼을 클릭하면 입력 요소에 포커스가 있어야 합니다. 먼저 입력 및 버튼과 함께 구성 요소를 만듭니다.

import React, { Component } from "react";

class CallbackRefExample extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        Callback Ref Example:
        <br />
        <br />
        <input type="text" />
        <button style={{ margin: "8px" }}>Click</button>
      </div>
    );
  }
}

export default CallbackRefExample;

저는 이것을 세 단계로 나누고 있습니다.

먼저 콜백 함수를 만들고 생성자에서 바인딩합니다. inputElementRef라는 콜백 함수를 만들었습니다.

import React, { Component } from "react";

class CallbackRefExample extends Component {
  constructor(props) {
    super(props);
    this.inputElementRef = this.inputElementRef.bind(this);
  }

  inputElementRef(inputElement) {
    this.inputRef = inputElement;
  }

  render() {
    return (
      <div>
        Callback Ref Example:
        <br />
        <br />
        <input type="text" />
        <button style={{ margin: "8px" }}>Click</button>
      </div>
    );
  }
}
export default CallbackRefExample;

둘째, 입력 요소의 props를 참조하는 기능inputElementRef()을 할당합니다.

<input type="text" ref={this.inputElementRef}/>

이제 콜백 참조를 만들었습니다.

셋째, inputRef 를 사용하여 포커스 메서드를 호출하는 클릭 핸들러 함수를 만듭니다.

  handleClick(){
    this.inputRef.focus();
  }

그리고 이 기능을 버튼의 onClick 이벤트에 할당합니다.

<button style={{ margin: "8px" }} onClick={this.handleClick} >Click</button>

따라서 최종 출력은 다음과 같습니다.

React.createRef() API 사용

16.3 버전의 React는 ref를 생성하기 위해 React.createRef()라는 새로운 API를 도입했습니다. 콜백 함수를 생성하고 여기에서 ref props에 할당할 필요가 없습니다. 따라서 ref를 생성하여 일부 변수에 저장하고 이 변수를 DOM 요소의 ref prop에 할당합니다. 따라서 동일한 예를 들어 하나의 입력 요소와 하나의 버튼이 있는 기능적 구성 요소를 만듭니다.

import React, { Component } from "react";

export default function CallbackRefExample() {
  return (
    <div>
      Callback Ref Example:
      <br />
      <br />
      <input type="text" />
      <button style={{ margin: "8px" }}>Click</button>
    </div>
  );
}

이제 inputRef라는 변수를 만들고 React.createRef() API로 할당합니다.

let inputRef = React.createRef();

이제 이 inputRef를 입력 요소의 ref props에 적용합니다. 그런 다음 버튼에 대한 onClick 핸들러를 생성하여 버튼 onClick 이벤트가 발생하면 입력 요소에 초점을 맞춰야 합니다. 따라서 최종 구성 요소는 다음과 같습니다.

import React, { Component } from "react";

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

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

  return (
    <div>
      Callback Ref Example:
      <br />
      <br />
      <input type="text" ref={inputRef} />
      <button style={{ margin: "8px" }} onClick={handleClick}>
        Click
      </button>
    </div>
  );
}

여기에서 ref의 current 속성에 탑재된 구성 요소 인스턴스를 받습니다. 그래서 다음과 같은 focus() 함수를 호출했습니다.

 inputRef.current.focus();

산출:

useRef() 후크 사용

이제 후크를 사용하여 참조를 만들 수 있습니다. 따라서 react는 useRef()라는 내장 후크를 제공합니다. useRef 후크는 ref의 초기 값을 입력으로 사용합니다. React.createRef()와 유사하게 추가 사용을 위해 참조 참조를 저장할 수 있는 변수를 만들어야 합니다. 다음은 예입니다.

import React, { useRef } from "react";

export default function UseRefHookExample() {
  let inputRef = useRef(null);

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

  return (
    <div>
      useRef() hook Example:
      <br />
      <br />
      <input type="text" ref={inputRef} />
      <button style={{ margin: "8px" }} onClick={handleClick}>
        Click
      </button>
    </div>
  );
}

산출:

결론

이 기사에서는 React JS에서 Ref를 만드는 다양한 방법에 대해 설명하고 ref를 사용하여 간단한 예제를 만들었습니다.

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

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

행복한 코딩!