React Refs

React로 웹 애플리케이션 개발도중 React 컴포넌트가 아닌 DOM 노드 혹은 React 엘리먼트에 접근해야 할 경우가 있다.

Ref는 render메서드에서 생성된 DOM 노드나 React 엘리먼트에 접근하는 방법을 제공한다.

React에서 부모와 자식 컴포넌트간에 상호작용은 prop으로 일어난다. 하지만 직접적으로 React 컴포넌트의 인스턴스 혹은 DOM 엘리먼트를 수정해야하는 일이 발생할 수 있는데, 이때 Ref를 활용할 수 있다.

Ref 활용 예시

• 포커스, 텍스트 선택영역, 미디어 재생의 관리
• 애니메이션 직접 실행
• 서드파티 DOM 라이브러리를 React와 함께 사용시

Ref 생성

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref={this.myRef} />;
  }
}

다음과 같이 createRef()로 생성되고 ref 어트리뷰트를 통해 React 엘리먼트에 부착된다.
컴포넌트의 인스턴스가 생성될 때 Ref를 프로퍼티로 추가하고 이는 컴포넌트의 인스턴스 어느 곳에서도 Ref에 접근할 수 있게 해준다.

Ref 접근 및 주의점!

const node = this.myRef.current;

render 메서드에서 ref가 엘리먼트에게 전달되었을 때, 그 노드를 향한 참조는 ref의 current 어트리뷰트에 담기게 된다.

이때 ref의 값은 노드의 유형에 따라 다르다.

• ref 어트리뷰트가 HTML 엘리먼트에 쓰였다면, 생성자에서 React.createRef()로 생성된 ref는 자신을 전달받은 DOM 엘리먼트를 current 프로퍼티의 값으로서 받는다.
• ref 어트리뷰트가 커스텀 클래스 컴포넌트에 쓰였다면, ref 객체는 마운트된 컴포넌트의 인스턴스를 current 프로퍼티의 값으로서 받는다.
• 함수 컴포넌트는 인스턴스가 없기 때문에 함수 컴포넌트에 ref 어트리뷰트를 사용할 수 없다.