React 에서 Ref 의 사용 방법 에 대한 상세 한 설명

이 글 의 실례 는 React 에서 Ref 의 사용 방법 을 서술 하 였 다.여러분 께 참고 하도록 공유 하 겠 습 니 다.구체 적 으로 는 다음 과 같 습 니 다.
React 에서 Ref 의 사용 React v 16.6.3
전형 적 인 React 데이터 흐름 에서 props 는 부모 구성 요소 와 하위 구성 요소 가 상호작용 하 는 유일한 방식 입 니 다.하위 항목 을 수정 하려 면 new props 를 사용 하여 다시 보 여 주 십시오.그러나 어떤 경우 에는 전형 적 인 데이터 흐름 외 에 하위 항목 을 강제로 수정 해 야 한다.수정 할 하위 항목 은 React 구성 요소 의 인 스 턴 스 일 수도 있 고 DOM 요소 일 수도 있 습 니 다.이 두 가지 상황 에 대해 React 는 api 를 제공 합 니 다.
refs 사용 시간
refs 는 좋 은 사례 가 있 습 니 다.

1.텍스트 선택 이나 미디어 재생.

2.피 할 수 없 는 애니메이션 을 터치 합 니 다.

3.제3자 DOM 라 이브 러 리 와 통합 합 니 다.

refs 를 설명 할 수 있 는 모든 작업 에 사용 하지 않도록 합 니 다.
*Refs 를 과도 하 게 사용 하지 마 세 요
이전 버 전 API:문자열 참조
이전에 React 를 사용 한 적 이 있다 면 ref 속성 은 문자열'textInput'이 고 DOM 노드 는 this.refs.textInput 으로 접근 할 수 있 습 니 다.문자열 인용 에 문제 가 있어 서 남 겨 진 문제 로 여 겨 지 므 로 미래의 한 버 전에 서 삭제 할 수 있 습 니 다.
리 셋 참조
구성 요소 가 설 치 될 때 React 는 DOM 요 소 를 사용 하여 ref 리 셋 을 호출 하고 마 운 트 해제 할 때 null 을 호출 합 니 다.
componentDid Mount 나 componentDid Update 가 실행 되 기 전에 Refs 는 최신 임 을 보증 합 니 다.

class CustomTextInput extends React.Component {
 constructor(props) {
 super(props);

 this.textInput = null;

 this.setTextInputRef = element => {
  this.textInput = element;
 };

 this.focusTextInput = () => {
  // Focus the text input using the raw DOM API
  if (this.textInput) this.textInput.focus();
 };
 }

 componentDidMount() {
 // autofocus the input on mount
 this.focusTextInput();
 }

 render() {
 // Use the `ref` callback to store a reference to the text input DOM
 // element in an instance field (for example, this.textInput).
 return (
  <div>
  <input
   type="text"
   ref={this.setTextInputRef}
  />
  <input
   type="button"
   value="Focus the text input"
   onClick={this.focusTextInput}
  />
  </div>
 );
 }
}

refs 예--클릭 하여 input 초점 가 져 오기

class Example extends React.Component {
 handleClick() {
 //       DOM API     
 this.refs.myInput.focus
 ();
 }
 render() {
 //        DOM  ，ref               this.refs
 return (
  <div>
  <input type="text" ref="myInput" />
  <input
   type="button"
   value="         "
   onClick={this.handleClick.bind(this)}
  />
  </div>
 );
 }
}

React.createRef()사용 하기
React.createRef()React 16.3 에 도 입 된 API.초기 버 전의 React 를 사용 하고 있다 면 리 셋 인용 을 사용 하 는 것 을 권장 합 니 다.
React.createRef()만 들 기
Refs 는 속성 을 사용 하여 만 든 것 입 니 다.React.createRef()는 ref 속성 을 통 해 React 요소 에 추 가 됩 니 다.구성 요 소 를 구성 할 때 전체 구성 요소 에서 참조 할 수 있 도록 Refs 를 인 스 턴 스 속성 에 할당 합 니 다.

class MyComponent extends React.Component {
 constructor(props) {
 super(props);
 this.myRef = React.createRef();
 }
 render() {
 return <div ref={this.myRef} />;
 }
}

ref 방문
ref 가 요소 에 전 달 될 때 render 는 이 노드 에 대한 인용 을 currentref 의 속성 에 접근 할 수 있 습 니 다.

const node = this.myRef.current;

ref 의 값 은 노드 의 유형 에 따라 다르다

refHTML 요소 에서 이 속성 을 사용 할 때 ref 가 구조 함수 에서 만 든 속성 은 React.createRef()를 바 텀 DOM 요 소 를 current 속성 으로 받 습 니 다.

ref 사용자 정의 클래스 구성 요소 에서 이 속성 을 사용 할 때 이 ref 대상 은 받 은 구성 요소 의 설 치 된 인 스 턴 스 를 current 로 합 니 다.

함수 구성 요소 에 이 속성 을 사용 할 수 없습니다.인 스 턴 스 가 없 기 때 문 입 니 다.

class CustomTextInput extends React.Component {
 constructor(props) {
 super(props);
 // create a ref to store the textInput DOM element
 this.textInput = React.createRef();
 this.focusTextInput = this.focusTextInput.bind(this);
 }

 focusTextInput() {
 // Explicitly focus the text input using the raw DOM API
 // Note: we're accessing "current" to get the DOM node
 this.textInput.current.focus();
 }

 render() {
 // tell React that we want to associate the <input> ref
 // with the `textInput` that we created in the constructor
 return (
  <div>
  <input
   type="text"
   ref={this.textInput} />

  <input
   type="button"
   value="Focus the text input"
   onClick={this.focusTextInput}
  />
  </div>
 );
 }
}

current 구성 요소 가 설 치 될 때 React 는 이 속성 에 DOM 요 소 를 할당 하고 null 은 마 운 트 해제 할 때 다시 할당 합 니 다.ref 업데이트 가 발생 하기 전에 componentDidMount 또는 componentDidUpdate 수명 주기 방법.
함수 구성 요소 에 ref 속성 을 사용 할 수 없습니다.

function MyFunctionComponent() {
 return <input />;
}

class Parent extends React.Component {
 constructor(props) {
 super(props);
 this.textInput = React.createRef();
 }
 render() {
 // This will *not* work!
 return (
  <MyFunctionComponent ref={this.textInput} />
 );
 }
}

**인용 이 필요 하 다 면,생명주기 방법 이나 상태 가 필요 할 때 처럼 구성 요 소 를 클래스 로 변환 해 야 합 니 다.
단,DOM 요소 나 클래스 구성 요 소 를 참조 하면 함수 구성 요소 에서 이 ref 속성 을 사용 할 수 있 습 니 다:**

function CustomTextInput(props) {
 // textInput must be declared here so the ref can refer to it
 let textInput = React.createRef();

 function handleClick() {
 textInput.current.focus();
 }

 return (
 <div>
  <input
  type="text"
  ref={textInput} />

  <input
  type="button"
  value="Focus the text input"
  onClick={handleClick}
  />
 </div>
 );
}

부모 구성 요소 에 DOM 인용 공개
극소수의 경우 부모 구성 요소 에서 하위 노드 의 DOM 노드 에 접근 하 기 를 원할 수도 있 습 니 다.일반적으로 이렇게 하 는 것 을 권장 하지 않 습 니 다.구성 요소 의 패 키 징 을 파괴 할 수 있 지만,때때로 초점 을 터치 하거나 하위 DOM 노드 의 크기 나 위 치 를 측정 하 는 데 사용 할 수 있 습 니 다.
하위 구성 요소 에 인용 을 추가 할 수 있 지만 이것 은 DOM 노드 가 아 닌 구성 요소 인 스 턴 스 만 얻 을 수 있 기 때문에 이상 적 인 해결 방안 이 아 닙 니 다.이 밖 에 기능 구성 요소 에는 적용 되 지 않 습 니 다.
React 16.3 또는 더 높 은 버 전 을 사용 하면 ref forwarding 을 사용 하 는 것 을 권장 합 니 다.리 트 윗 을 참조 하면 구성 요소 가 모든 하위 구성 요소 의 인용 을 자신의 구성 요소 로 공개 하 는 것 을 선택 할 수 있 습 니 다.ref 전송 문서 에서 하위 DOM 노드 를 부모 구성 요소 에 공개 하 는 방법 에 대한 상세 한 예 시 를 찾 을 수 있 습 니 다.
React 16.2 또는 더 낮은 버 전 을 사용 하거나 ref 퍼 가기 보다 더 유연성 이 필요 하 다 면 이 대체 방법 을 사용 하여 ref 를 서로 다른 이름 의 prop 로 명확 하 게 전달 할 수 있 습 니 다.
가능 하 다 면 DOM 노드 를 노출 하지 않 는 것 이 좋 지만 유용 한 탈출 구 일 수 있 습 니 다.이 방법 은 하위 구성 요소 에 코드 를 추가 해 야 합 니 다.하위 구성 요 소 를 완전히 제어 할 수 없다 면 마지막 옵션 은 findDOMNode()를 사용 하지만 StrictMode 를 사용 하 는 것 을 권장 하지 않 습 니 다.
본 고 에서 말 한 것 이 여러분 의 react 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.