원래 HTML에서 DOM요소에 이름을 달때는 ID를 사용한다

→ 이렇게 된다면 (특정)DOM에 접근할수 있게 된다

그렇담 리엑트에는? → ref를 이용하여 DOM에 이름을 단다

• 리액트 컴포넌트 안에서도 id 사용이 가능하다 전역적으로 작동하기때문에 ref사용을 권장(컴포넌트 내부만 작동함)

ref는 어떤 상황에서 사용해야 할까?

DOM을 꼭 직접적으로 건드려야 할 때

state로도 필요기능을 구현할수 있지만, 가끔 state로 해결 못하는 경우가 있다

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

ref 사용

일단 클래스형으로 (this가 존내 나옴 앞에)

1. 콜백 함수를 통한 ref 설정

기본적인 방법으로 ref를 달고자 하는 요소에 ref라는 콜백 함수를 props로 전달해줌

• 콜백함수는 ref값을 파라미터로 전달받음

함수 내부에서 파라미터로 받은 ref ⇒ 컴포넌트의 멤버 변수로 설정해준다

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

이 뒤에 this.input은 이제 input요소의 DOM(input을 만든 DOM)을 가르키게 된다.

2. createRef를 통한 ref 설정

리액트에서 제공하는 createRef함수를 이용한다

input = React.createRef();

....

<input ref={this.input}

이제 this.input은 input요소의 DOM을 가르킨다

요소가 아닌 컴포넌트에 ref 달기

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

이렇게 하면 MyComponent 내부의 메서드 및 멤버 변수에도 접근 할수 있다

즉, 내부의 ref에 접근 가능

예시 : myComponent.handleClick ⇒ 컴포넌트 내부에 있는 함수를 사용한다.