ref란?

ref(reference의 줄임말)이란, HTML에서 id를 사용하여 DOM에 이름을 다는 것처럼 리액트 프로젝트 내부에서 DOM에 이름을 다는 방법

** 리액트 컴포넌트 안에서도 id를 사용할 수는 있으며, JSX안에서 DOM에 id르 달면 해당 DOM으러 렌더링할 떄 그대로 전달됩니다. 특수한 경우가 아니면 사용을 권장하지 않습니다.
컴포넌트를 반복 사용하게 될 경우 중복id를 가진 DOM이 여러개 생성되기때문입니다.

1. ref를 사용해야하는 상황

1. DOM을 꼭 직접적으로 건드려야 할 때!
2. 특정 input에 포커스 주기
3. 스크롤 박스 조작하기
4. Canvas 요소에 그림 그리기 등

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

ref를 달고자 하는 요소에 ref라는 콜백 함수를 props로 전달해 주면 됩니다.
이 콜백 함수는 ref값을 파라미터로 전달받습니다. 그리고 함수 내부에서 ㄹ파라미터로 받은 ref를 컴포넌트의 멤버 변수로 설정해 줍니다.

콜백 함수 사용 예시

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

이렇게 하면 this.input은 input요소의 DOM를 가르킵니다.

3. createRef를 통한 ref설정

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;

컴포넌트 내뷍서 멤버 변수로 React.createRef()를 담아준 뒤, 해당 멤버 변수를 ref를 달고자 하는 요소에 ref props로 넣어주면 설정이 완료 됩니다.
설정해 준 DOM에 접근하려면 this.input.current를 조회하면 됩니다.
콜백 함수를 사용할 때와 다른 점은 이렇게 뒷부분엔 .current를 넣어주어야 한다는 것입니다.

4. 컴포넌트에 ref달기

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

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

ScrollBox.js

import React, { Component } from 'react';
 
class ScrollBox extends Component {
  render() {
    const style = {
      border: '1px solid black',
      height: '300px',
      width: '300px',
      overflow: 'auto',
      position: 'relative'
    };
 
    const innerStyle = {
      width: '100%',
      height: '650px',
      background: 'linear-gradient(white, black)'
    }
 
    return (
      <div 
        style={style}
        ref={(ref) => {this.box=ref}}>
        <div style={innerStyle}/>
      </div>
    );
  }
}
 
export default ScrollBox;

App.js

import React, { Component } from 'react';
import ScrollBox from './ScrollBox';
 
class App extends Component {
  render() {
    return (
      <div>
        <ScrollBox/>
      </div>
    );
  }
}
 
export default App;