리액트 입문기 - ref:DOM

HTML에서 DOM요소에 id,name을 붙히듯이 리액트 내부에서도 DOM에 이름을 다는 방식이 있습니다.
바로 ref(Reference) 개념 입니다.

ref는 언제 써야 하나

기본적으로 state나 useState를 사용하여 이벤트를 핸들링 하나, 이것으로는 할 수 없는 이벤트를 발생시켜야 할때,
즉 DOM을 직접적으로 건드려야 할때 사용합니다.

* Dom을 직접 건드려야 하는 예

• 특정 input에 포커스 주기
• 스크롤 박스 조작하기
• Canvas요소에 그림 그리기 등

ref 사용방법 1 - 콜백함수를 통한 설정

ref를 만드는 가장 기본적인 방법은 콜백함수를 사용하는 것입니다. ref를 달고자 하는 요소에 ref라는 콜백 함수를 props로 전달해주면 됩니다.

* 콜백 함수 사용 예시

<input ref={(ref) => {this.input=ref}} />

이렇게 하면 ref는 input요소의 DOM을 가리킵니다. ref의 이름은 원하는 것으로 지을 수 있습니다.

ref 사용방법 2 - createRef를 통한 설정

ref를 사용하는 두번째 방법은 리액트에 내장된 createRef함수를 사용하는 것 입니다.

※ 해당 함수는 리액트 v16.3부터 도입되었으며, 이전 버전은 사용이 불가합니다.

* createRef 예시

import React, { Component } from 'react';
class creteRefs extends Component{
	input = React.createRef();
	handleFocus = () => {
    	this.input.current.focus();
    }
}

컴포넌트에 ref 달기

컴포넌트에도 ref를 달 수 있습니다. 이 방법은 주로 컴포넌트 내부에 있는 DOM을 외부에서 사용할 때 씁니다.

* 컴포넌트 ref 사용법

<MyComponent ref={(ref) => {this.MyComponent=ref}} ></MyComponent>

참고자료
리액트를 다루는 기술