Contents1. 콜백 함수를 통한 ref 설정 2. createRef 를 통한 ref 설정 3. 컴포넌트에 ref 사용하기
ref 는 리액트에서 render 메서드에서 생성된 DOM 노드 나
React 엘리먼트 에 접근하게 해줍니다.
ref 는 주로 DOM 을 직접적으로 접근해야 할 때에 사용합니다.
ref 는 클래스형 컴포넌트에서 사용가능하고
함수형 컴포넌트에서는 Hook Api 를 이용하여 ref 를 사용해야 합니다.
ref 를 사용하고자 하는 요소에 ref 콜백함수를 props 로 전달해 줍니다.
<input ref={(ref) => {this.input=ref}} />
위와 같이 설정하게 되면 this.input 은 input 요소의 DOM 을 가리키게 됩니다.
createRef 함수는 React v16.3 부터 적용되었습니다. 이전버전은 createRef 함수를 사용할 수 없습니다.
(...)
import React, { Component } from 'react';
class MyComponent extends React.Component {
myRef = React.createRef();
render() {
return <div ref={this.myRef} />;
}
}
(...)
createRef 함수를 사용하여 ref 를 설정하면 사용할 때에는
꼭 .current 를 넣어서 DOM 에 접근해야 합니다.
컴포넌트에서 ref 를 사용하여 컴포넌트 외부에서
컴포넌트 내부의 DOM 을 사용할 수 있고 또한 메서드와
멤버변수에도 접근할 수 있습니다.
컴포넌트에서 ref 는 다음과 같이 사용할 수 있습니다.
<MyComponent ref={(ref) => {this.myComponent=ref}}/>
위와 같이 ref 를 설정하면 외부 컴포넌트에서
this.myComponent 를 사용하여 내부 컴포넌트로 접근할 수 있습니다.