[React] Ref

---

📝 ref

HTML에서 id를 사용하여 DOM에 이름을 다는 것처럼 React프로젝트 내부에서 DOM에 이름을 다는 방법이 ref(reference) 개념입니다.

---

🔎 함수형 컴포넌트에서 ref를 사용하려면 Hooks를 사용해야 하기 때문에
Class형 컴포넌트 먼저 알아보겠습니다.

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

• React에서 state로만 해결할 수 없고, DOM을 반드시 직접 건드려야 할 때 사용하게 됩니다.
  • ex) 특정 input에 focus주기, scroll box 조작, canvas 요소에 그림 그리기 등

---

📜 Class형 컴포넌트 - 콜백 함수를 통한 ref 설정하기

• ref를 만드는 가장 기본적인 방법은 콜백 함수를 사용하는 것입니다.
• ref를 달고자 하는 요소에 ref라는 콜백 함수를 props로 전달해 주면 됩니다.
• 이 콜백 함수는 ref 값을 파라미터로 전달받습니다.
• 그리고 함수 내부에서 파라미터로 받은 ref를 컴포넌트의 멤버 변수로 설정해 줍니다.

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

  위의 input 요소는 앞으로 react 코드 내에서 this.input을 통하여 접근이 가능해집니다.
  this.input 말고 사용자가 원하는 어떤 이름이라도 자유롭게 가능합니다.
  이는 react 내에서 id 처럼 쓰이게 된 것입니다.

📜 Class형 컴포넌트 - createRef를 통한 ref 설정

ref를 만드는 또 다른 방법은 react에 내장되어 있는 createRef라는 함수를 사용하는 것입니다.
이 기능은 react v16.3부터 도입되었으며 이전 버전에서는 작동하지 않습니다.

import { Component } from 'react';

class Sample extends Component{
      input = React.createRef();

    handleFocus = () => {
        this.input.current.focus();
    }
    render(){
        return(
            <div>
                  <input ref={this.input} />
              </div>
        )
    }
}
export default Sample;

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

📜 컴포넌트에 ref 달기

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

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

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

---