반응 참조 - REACTJS 튜토리얼

Refs는 다음의 약어입니다. 참고자료 반응에서. 그것은 비슷하다 열쇠 반응에서. 특정 DOM 노드나 React 요소에 대한 참조를 저장할 수 있게 해주는 속성입니다. React DOM 노드 또는 React 요소에 액세스하는 방법과 상호 작용하는 방법을 제공합니다. props를 사용하지 않고 자식 컴포넌트의 값을 변경하고 싶을 때 사용됩니다.

Refs를 사용해야 하는 경우

Refs는 다음과 같은 경우에 사용할 수 있습니다.

포커스 관리, 텍스트 선택 또는 미디어 재생과 같은 DOM 측정이 필요한 경우.
명령형 애니메이션을 트리거하는 데 사용됩니다.
타사 DOM 라이브러리와 통합하는 경우.
콜백에서와 같이 사용할 수도 있습니다.

Refs를 사용하지 말아야 할 경우

수행할 수 있는 모든 작업에는 사용을 피해야 합니다. 선언적으로 . 예를 들어, 열려 있는() 그리고 닫다() Dialog 구성 요소의 메소드를 전달하려면 열려 있음 그것에 버팀목.
Refs의 남용을 피해야 합니다.

Ref를 만드는 방법

React에서는 다음을 사용하여 Ref를 생성할 수 있습니다. React.createRef() . 이는 다음을 통해 React 요소에 할당될 수 있습니다. 심판 기인하다. 이는 일반적으로 구성 요소가 생성될 때 인스턴스 속성에 할당된 다음 구성 요소 전체에서 참조될 수 있습니다.

 class MyComponent extends React.Component { constructor(props) { super(props); this.callRef = React.createRef(); } render() { return ; } }

Refs에 액세스하는 방법

React에서 ref가 render 메서드 내부의 요소에 전달되면 ref의 현재 속성을 통해 노드에 대한 참조에 액세스할 수 있습니다.

 const node = this.callRef.current;

현재 속성 참조

ref 값은 노드 유형에 따라 다릅니다.

ref 속성이 HTML 요소에 사용되면 ref는 다음과 같이 생성됩니다. React.createRef() 기본 DOM 요소를 해당 요소로 받습니다. 현재의 재산.
ref 속성이 사용자 정의 클래스 구성 요소에 사용되면 ref 객체는 탑재 구성 요소의 인스턴스를 현재 속성으로 사용합니다.
ref 속성은 다음에서 사용할 수 없습니다. 기능 구성 요소 왜냐하면 인스턴스가 없기 때문입니다.

DOM 요소에 Ref 추가

아래 예에서는 DOM 노드 또는 요소에 대한 참조를 저장하기 위해 참조를 추가합니다.

 import React, { Component } from &apos;react&apos;; import { render } from &apos;react-dom&apos;; class App extends React.Component { constructor(props) { super(props); this.callRef = React.createRef(); this.addingRefInput = this.addingRefInput.bind(this); } addingRefInput() { this.callRef.current.focus(); } render() { return ( <h2>Adding Ref to DOM element</h2> ); } } export default App;

산출

클래스 구성 요소에 참조 추가

아래 예에서는 클래스 구성 요소에 대한 참조를 저장하기 위해 참조를 추가합니다.

예

 import React, { Component } from &apos;react&apos;; import { render } from &apos;react-dom&apos;; function CustomInput(props) { let callRefInput = React.createRef(); function handleClick() { callRefInput.current.focus(); } return ( <h2>Adding Ref to Class Component</h2> ); } class App extends React.Component { constructor(props) { super(props); this.callRefInput = React.createRef(); } focusRefInput() { this.callRefInput.current.focus(); } render() { return ( ); } } export default App;

산출

콜백 참조

이에 대응하여 ''라는 심판을 사용하는 또 다른 방법이 있습니다. 콜백 참조 ' 그리고 심판이 있을 때 더 많은 제어권을 제공합니다. 세트 그리고 설정되지 않음 . React에서는 createRef() 메소드로 ref를 생성하는 대신 컴포넌트의 ref 속성에 콜백 함수를 전달하여 ref를 생성하는 방법을 허용합니다. 아래 코드와 같습니다.

 this.callRefInput = element} /&gt;

콜백 함수는 인스턴스 속성에 DOM 노드에 대한 참조를 저장하는 데 사용되며 다른 곳에서 액세스할 수 있습니다. 아래와 같이 접근 가능합니다:

 this.callRefInput.value

아래 예는 콜백 참조의 작동을 이해하는 데 도움이 됩니다.

 import React, { Component } from &apos;react&apos;; import { render } from &apos;react-dom&apos;; class App extends React.Component { constructor(props) { super(props); this.callRefInput = null; this.setInputRef = element =&gt; { this.callRefInput = element; }; this.focusRefInput = () =&gt; { //Focus the input using the raw DOM API if (this.callRefInput) this.callRefInput.focus(); }; } componentDidMount() { //autofocus of the input on mount this.focusRefInput(); } render() { return ( <h2>Callback Refs Example</h2> ); } } export default App;

위의 예에서 React는 'ref' 콜백을 호출하여 구성 요소가 입력될 때 입력 DOM 요소에 대한 참조를 저장합니다. 마운트 , 그리고 구성 요소가 마운트 해제 , 다음으로 전화하세요 없는 . 심판은 언제나 최신 정보 전에 컴포넌트DidMount 또는 컴포넌트DidUpdate 화재. 구성요소 간 콜백 참조 전달은 React.createRef()로 생성된 객체 참조로 작업할 수 있는 것과 동일합니다.

산출

한 구성요소에서 다른 구성요소로 Ref 전달

참조 전달(Ref Forwarding)은 정보를 전달하는 데 사용되는 기술입니다. 심판 구성 요소를 통해 해당 하위 구성 요소 중 하나로 연결됩니다. 을 활용하여 수행할 수 있습니다. React.forwardRef() 방법. 이 기술은 다음과 같은 경우에 특히 유용합니다. 고차 성분 재사용 가능한 구성 요소 라이브러리에 특별히 사용됩니다. 가장 일반적인 예는 다음과 같습니다.

예

 import React, { Component } from &apos;react&apos;; import { render } from &apos;react-dom&apos;; const TextInput = React.forwardRef((props, ref) =&gt; ( )); const inputRef = React.createRef(); class CustomTextInput extends React.Component { handleSubmit = e =&gt; { e.preventDefault(); console.log(inputRef.current.value); }; render() { return ( this.handleSubmit(e)}&gt; Submit ); } } export default App;

위의 예에는 구성요소가 있습니다. 텍스트 입력 입력 필드로 자식이 있는 것입니다. 이제 전달하거나 전달하려면 심판 입력까지 먼저 참조를 만든 다음 참조를 아래로 전달합니다. . 그 후 React는 참조를 다음으로 전달합니다. 앞으로Ref 두 번째 인수로 작동합니다. 다음으로, 이 ref 인수를 아래로 전달합니다. . 이제 DOM 노드의 값은 다음에서 액세스할 수 있습니다. 입력기준전류 .

useRef()로 반응

에 소개되어 있습니다. 16.7 반응 그리고 위 버전. DOM 노드나 요소에 액세스하는 데 도움이 되며 입력 요소에 초점을 맞추거나 입력 요소 값에 액세스하는 등 해당 DOM 노드나 요소와 상호 작용할 수 있습니다. ref 객체를 반환합니다. .현재의 전달된 인수로 초기화된 속성입니다. 반환된 개체는 구성 요소의 수명 동안 유지됩니다.

통사론

 const refContainer = useRef(initialValue);

예

아래 코드에서, useRef 변수에 할당되는 함수입니다. 입력 참조 , 참조하려는 HTML 요소 내의 ref라는 속성에 첨부됩니다.

 function useRefExample() { const inputRef= useRef(null); const onButtonClick = () =&gt; { inputRef.current.focus(); }; return ( Submit ); }