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>

리액트를 다루는 기술(개정판)을 정독하면서 서술한 내용입니다.