React refs 소개

무엇Refs컴퓨터 에서 탄성 파일 시스템 이 라 고 합 니 다(영어:Resilient File System,ReFS 라 고 약칭)React중의Refs은 우리 가DOM노드 에 접근 하거나render방법 에서 만 든React요 소 를 제공 하 는 방식 을 제공 했다.
본질 적 으로ReactDOM.render()되 돌아 오 는 구성 요소 인 스 턴 스 입 니 다.렌 더 링 구성 요소 라면 구성 요소 인 스 턴 스 를 되 돌려 줍 니 다.렌 더 링dom하면 구체 적 인dom노드 를 되 돌려 줍 니 다.
어떻게 사용
창설ref의 형식 은 세 가지 가 있다.

문자열 을 입력 합 니 다.사용 시 this.refs.들 어 오 는 문자열 의 형식 을 통 해 해당 하 는 요 소 를 가 져 옵 니 다

전입 대상 은 React.createRef()를 통 해 전 달 됩 니 다.  방식 을 만 듭 니 다.사용 할 때 만 든 대상 에 current 속성 이 존재 하 는 것 이 대응 하 는 요소 입 니 다

함 수 를 입력 합 니 다.이 함 수 는 DOM 이 마 운 트 될 때 리 셋 됩 니 다.이 함 수 는 하나의 요소 대상 에 전 달 됩 니 다.스스로 저장 할 수 있 습 니 다.사용 할 때 이전에 저 장 된 요소 대상 을 직접 가 져 가면 됩 니 다

훅 에 들 어 갑 니 다.훅 은 useRef()방식 으로 만 듭 니 다.사용 시 훅 대상 을 생 성 하 는 current 속성 이 대응 하 는 요소

입 니 다.
입력 문자열
대응 하 는 요소 나 구성 요소 에서ref속성 만 필요 합 니 다.

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

현재 노드 에 접근 하 는 방법 은 다음 과 같 습 니 다.

this.refs.myref.innerHTML = "hello";

전입 대상refsReact.createRef()을 통 해 만 든 다음ref속성 을React요소 에 추가 합 니 다.다음 과 같 습 니 다.

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

ref이render의 요소 에 전 달 될 때 이 노드 에 대한 인용 은ref의current속성 에서 방문 할 수 있 습 니 다.

const node = this.myRef.current;

입력 함수ref함수 로 전 송 될 때 렌 더 링 과정 에서 리 셋 함수 매개 변 수 는 요소 대상 에 전 달 된 다음 인 스 턴 스 를 통 해 대상 을 저장 합 니 다.

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

대상 가 져 오기ref대상 은 이전에 저 장 된 대상 을 통 해 만 가능 합 니 다.

const node = this.myref 

훅useRef을 통 해 하나 만 들 기ref,전체 사용 방식 은React.createRef와 일치 합 니 다.

function App(props) {
  const myref = useRef()
  return (
    <>
      <div ref={myref}></div>
    </>
  )
}

획득ref속성 도 통과hook대상current속성

const node = myref.current;

상기 세 가지 상황 은ref속성 이 원생HTML요소 에 사 용 됩 니 다.ref설정 한 구성 요소 가 하나의 구성 요소 일 때ref대상 은 구성 요소 의 마 운 트 인 스 턴 스 를 받 습 니 다.
함수 구성 요소 에 속성 을 사용 할 수 없습니다ref.인 스 턴 스 가 없 기 때 문 입 니 다.
3.응용 장면
어떤 경우 에 우 리 는refs을 사용 하여 구성 요 소 를 업데이트 할 것 입 니 다.그러나 이런 방식 은 추천 하지 않 습 니 다.더 많은 경우 에 우 리 는props과state방식 으로 서브 요 소 를 다시 렌 더 링 합 니 다.
과 다 사용refs은 구성 요소 의 인 스 턴 스 나DOM구 조 를 노출 시 켜 구성 요소 패키지 의 원칙 을 위반 할 수 있 습 니 다.
예 를 들 어Dialog구성 요소 에 노출open()과close()방법 을 피하 고isOpen속성 을 전달 하 는 것 이 좋 습 니 다.
그러나 아래 장면 의 사용refs은 매우 유용 하 다.

Dom 요소 에 대한 초점 통제,내용 선택,통제

Dom 요소 의 내용 설정 및 미디어 재생

Dom 요소 에 대한 조작 과 구성 요소 인 스 턴 스 에 대한 조작

제3자 DOM 라 이브 러 리 통합

여기 서 React refs 의 이해 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 React refs 에 관 한 이해 내용 은 저희 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 부 탁 드 리 겠 습 니 다!