ref:DOM
ref:DOM
ref(Referene) 개념은 리액트 내부에서 DOM에 이름을 다는 방법입니다.
ref를 써야할 상황은?
DOM을 직접 건드려야 할 때 사용합니다.
- 특정 input에 포커스 주기
- 스크롤 박스 조작하기
- Canvas 요소에 그림 그리기 등
콜백 함수를 통한 ref 설정
ref를 달고자 하는 요소에 ref라는 콜백 함수를 props로 전달해 주면 됩니다.
<input ref={(ref) => {this.input=ref}} />
ref는 input 요소의 DOM을 가르키고, ref의 이름은 원하는 것으로 지정할 수 있습니다.
createRef를 통한 ref 설정
리액트에 내장된 createRef라는 함수를 사용하는 것입니다.
이 기능은 리액트 v16.3부터 도입되었습니다.
import React, { Component } from 'react';
export default class Sample extends MyComponent {
input = React.createRef();
handleFocus = () => {
this.input.current.focus();
};
render() {
return (
<div>
<input ref={this.input} />
</div>
);
}
}
컴포넌트에 ref 달기
컴포넌트에도 ref를 달 수 있습니다.
이 방법은 주로 컴포넌트 내부에 있는 DOM을 외부에서 사용할 때 씁니다.
<MyComponent ref={(ref) => {this.MyComponent=ref}} ></MyComponent>
리액트를 다루는 기술(개정판)을 정독하면서 서술한 내용입니다.
Author And Source
이 문제에 관하여(ref:DOM), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@resident000/refDOM저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)