🥇 ref(reference)

• 리액트 프로젝트 내부에서 DOM에 이름을 다는 방법.
• DOM을 꼭 직접적으로 건드려야 할 때 사용된다.
  (예시: 특정 input에 포커스, 스크롤 박스 조작, Canvas 요소에 그림 그리기)

🥈 ref 사용법

• 콜백 함수를 통한 ref 설정

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

  • ref를 달고자 하는 요소에 ref라는 콜백 함수를 props로 전달.
    이 콜백 함수는 ref 값을 파라미터로 전달 받고, 함수 내부에서 파라미터로 받은 ref를 컴포넌트의 멤버 변수로 설정.
  • ref의 이름은 원하는 것으로 자유롭게 지정할 수 있다.
    (DOM 타입과 관계없이 this.vanLan = ref 처럼 마음대로 지정.)

• createRef를 통한 ref 설정

  
  import React, { Component } from 'react;
  
  export default class RefExample extends Component {
    input = React.createRef();
  
    handleFocus = () => {
      this.input.current.focus();
    }
    
    render() {
      return (
        <div>
          <input ref={this.input} />
        </div>
      );
    }
  }

  • 컴포넌트 내부에서 React.createRef()를 멤버 변수로 할당.
    ref를 달고자 하는 요소에 ref props로 넣어주면 ref 설정 완료.
  • ref 설정을 해둔 DOM에 접근하려면 this.input.current를 조회하면 된다.
    (콜백 함수 사용시와 다른점은 멤버변수 뒷 부분에 .current를 넣어 주어야 한다는 것.)

• 컴포넌트에서 ref 사용법

  <MyComponent
    ref={(ref) => {this.myComponent=ref}}
  />
  // MyComponent 내부의 메서드 및 멤버 변수에도 접근 할 수 있다.
  // 내부의 ref에도 접근 가능(예: myComponent.handleClick, myComponent.input 등).

  • 리액트에서는 컴포넌트에서도 ref를 사용할 수 있다.
    주로 컴포넌트 내부에 있는 DOM을 컴포넌트 외부에서 사용할 때 사용한다.
  • 사용법은 DOM에 ref를 사용하는 방법과 같다.

📀 정리

• 컴포넌트 내부에서 DOM에 직접 접근해야 할 때 ref를 사용한다.
  (ref를 사용하지 않고도 원하는 기능을 구현할 수 있는지 반드시 고려후 활용.)
• 서로 다른 컴포넌트끼리 데이터를 교류할 때 ref를 사용할 수는 있으나 이는 잘못된 사용이다.
  (컴포넌트끼리 데이터를 교류할 때는 언제나 부모 <-> 자식 흐름으로 교류 해야한다.)
• 함수 컴포넌트에서 ref를 사용할 때는 useRef라는 Hook 함수를 사용한다.

[참고] 김민준(Velopert)님의 '리액트를 다루는 기술'을 공부하며 정리한 내용임.