리액트(React) - 클래스 컴포넌트 Ref

리액트를 공부하면서 쓰는 글이니 오류가 있을 수 있습니다. 오류가 있다면 알려주세요!

 

ref는 reference의 약자로 참조를 뜻합니다. 

 

기본 자바스크립트에서는 querySelector()나 getElementById() 같은 메서드를 사용하여 DOM 객체를 가져와 사용했습니다.

 

리액트에서는 컴포넌트를 이용해 DOM을 수정합니다. 따라서 보통은 컴포넌트 안에서 State 또는 Props를 이용해 화면 DOM을 변경하여 화면을 렌더링 합니다. 컴포넌트에서 DOM을 직접적으로 변경해야 하는 상황이 있을 때 DOM 객체를 가져와야 하는데요.

 

이때 사용하는것이 ref입니다. ref에 DOM의 객체를 가지고 있습니다.

 

ref는 직접적으로 DOM 수정해야 하는 경우 사용됩니다. 이때 ref는 DOM 또는 컴포넌트를 가집니다.

 

ref를 사용해야 할 때가 있습니다.

• 포커스를 줘야할때, 텍스트 선택영역, 미디어의 재생을 관리할 때
• 애니메이션을 직접적으로 사용해야 할 때
• 서드 파티 DOM 라이브러리를 React와 같이 사용할 때
• 등등

 

ref 사용하기

ref를 사용하는 방법은 2가지가 있습니다. createRef() 메서드를 사용하는 방법 또는 콜백 함수를 이용해 ref를 사용하는 방법이 있습니다.

 

콜백 함수를 이용한 ref

말 그대로 콜백 함수를 이용해 ref를 전달합니다.

//Test.js
import React, { Component } from "react";

class Test extends Component {
  constructor() {
    super();
    this.inputRef = null;
  }

  setInputRef = (ref) => {
    this.inputRef = ref;
  }

  inputFocus = () => {
    this.inputRef.focus();
  }

  render() {
    return (
      <div>
        <input ref={ this.setInputRef } />
        <button onClick={ this.inputFocus }>클릭!</button>
      </div>
    );
  }
}

export default Test

이렇게 DOM 객체가 필요한 엘리먼트에 ref 속성을 사용하면 컴포넌트의 선언한 메서드가 호출되고 전달된 ref는 inputRef에 저장됩니다.

 

그 후 버튼을 클릭하면 input DOM 객체의 focus() 메서드가 호출되며 포커스가 발생합니다.

 

createRef() 메서드를 사용한 ref

createRef() 메서드는 v16.3 부터 도입된 기능입니다. 이 메서드를 사용해서 조금 더 간단하게 ref를 사용할 수 있습니다.

import React, { Component } from "react";

class Test extends Component {
  constructor() {
    super();
    this.inputRef = React.createRef();
  }

  inputFocus = () => {
    this.inputRef.current.focus();
  }

  render() {
    return (
      <div>
        <input ref={ this.inputRef } />
        <button onClick={ this.inputFocus }>클릭!</button>
      </div>
    );
  }
}

export default Test;

콜백 ref를 사용할때와는 조금 더 간결해졌습니다. createRef()를 통해 생성된 ref 객체는 접근할 때 current 프로퍼티에 접근해야 전달받은 객체에 접근이 가능합니다.

 

컴포넌트 ref

컴포넌트 내부에서 DOM 객체를 사용하기 위해 ref를 사용했었습니다. 하지만 ref는 컴포넌트도 전달받을 수 있습니다.

이렇게 되면 컴포넌트 내부의 프로퍼티들과 메서드에도 접근이 가능해 집니다.

//Test.js
import React, { Component } from "react";
import Test2 from "./Test2.js";

class Test extends Component {
  render() {
    return (
      <div>
        <Test2 ref={(ref) => { this.testRef = ref; }} />
        <button onClick={ () => { this.testRef.testAlert(); }}>클릭!</button>
      </div>
    );
  }
}

export default Test;

//Test2.js
import React, { Component } from 'react';

class Test2 extends Component {
    testAlert = () => {
        alert("컴포넌트 외부에서 호출했어요!");
    }

    render() {
        return (
            <div>
                클릭해보세요!
            </div>
        );
    }
}

export default Test2;

 

함수형 컴포넌트에서 ref 사용하기

추후 공부

 

참고

리액트를 다루는 기술(개정판) - 김민준 지음

https://ko.reactjs.org/docs/refs-and-the-dom.html

Ref와 DOM – React