5장 ref:DOM에 이름 달기 (리액트를 다루는 기술)

일반 HTML에서 DOM 요소에 이름을 달 때는 id를 사용합니다.

이렇게 HTML에서 id를 사용하여 DOM에 이름을 다는 것 처럼 리액트 프로젝트 내부에서 DOM에 이름을 다는 방법이 있습니다.
바로 ref 개념입니다.

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

'DOM을 꼭 직접적으로 건드려야 할 때' 입니다.

함수형 컴포넌트에서 ref를 사용하려면 Hooks를 사용해야 하기 때문에 8장에서 Hooks를 배우면서 알아볼 것입니다.

DOM을 꼭 사용해야하는 상황

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

ref 사용

ref를 사용하는 방법은 두 가지입니다.

1. 콜백 함수를 통한 ref 설정
   ref를 달고자 하는 요소에 ref라는 콜백 함수를 props로 전달해 주면 됩니다.

   이 콜백 함수는 ref 값을 파라미터로 전달받습니다. 그리고 함수 내부에서 파라미터로 받은 ref를 컴포넌트의 멤버 변수로 설정해 줍니다.
   <input ref = {(ref) => {this.input=ref}} />

2. 리액트에 내장되어 있는 createRef라는 함수를 사용하는 것입니다.

import React, {Component} from 'react'

class RefSample extends Component {
  input = React.createRef();
  
  handleFocus=()=>{
     this.input.current.focus();
     }
     
     render(){
      return (
        <div>
          <input ref={this.input} />
       </div>
        );
     }
}

export default RefSample;

컴포넌트에 ref 달기

사용법

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

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

즉 내부의 ref에도 접근할 수 있습니다.
(예:myComponent.handleClick, myComponent.input 등)