React ref

1. 개요

리액트에서는 DOM을 제어할 수 있는 ref라는 것을 제공합니다.

ref는 DOM을 제어하는 것으로 반드시 DOM을 직접적으로 제어를 해야할 때만 사용할 것을 권장하고 있습니다.

예를 들면 특정 이벤트가 발생했을 때 스크롤을 특정 위치로 옮겨야할 때 ref를 사용합니다.

또는, 리액트용으로 개발되지 않은 라이브러리를 사용해야할 때 ref를 사용하게 됩니다.

 

2. 사용방법

ref를 사용하는 방법은 두가지가 있습니다.

첫 번째는 콜백 함수를 이용해서 ref를 등록하는 것입니다.

import React from "react";

class RefSample extends React.Component {
  render() {
    return (
      <React.Fragment>
        <div ref={(ref) => {this.ref = ref}}>ref div</div>
      </React.Fragment>
    );
  }
}

두 번째 방법은 createRef를 통해 ref를 등록하는 것입니다.

 

import React from "react";

class RefSample extends React.Component {
  ref = React.createRef();
  
  render() {
    return (
      <React.Fragment>
        <div ref={this.ref}>ref div</div>
      </React.Fragment>
    );
  }
}

위와 같이 ref를 등록 후 ref를 통해 DOM을 직접 제어할 수 있습니다.

또한, 기본 요소 외에도 컴포넌트에 ref를 등록해서 컴포넌트의 함수를 호출할 수도 있습니다.