[React] Ref란?

 

 

Ref는 'reference'의 약자로, '참조'라는 뜻입니다. react에서 element의 값을 얻거나 수정할 때 보통 javascript, jquery를 사용합니다. 이때 id나 class와 같은 속성으로 element에 접근합니다. Ref를 사용하면 element가 참조하는 변수에 접근해 변경하고 element를 제어할 수 있습니다.

 

 

[Ref를 사용해야 할 때]

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

선언적으로 해결될 수 있는 문제에서는 Ref 사용을 지양해야 합니다.

예를 들어, Dialog 컴포넌트에서 open()과 close() 메서드를 두는 대신, isOpen 이라는 prop을 전달이 더 좋은 방법입니다.

 

 

[Ref 생성하기]

Ref는 React.createRef() 를 통해 생성되고 ref 어트리뷰트를 통해 React 엘리먼트에 부착됩니다. 보통 컴포넌트의 인스턴스가 생성될 때 Ref를 프로퍼티로서 추가하고, 그럼으로서 컴포넌트의 인스턴스의 어느 곳에서도 Ref에 접근할 수 있게 합니다.

class TestComponent extends Component {
    constructor(props) {
        super(props);
        this.inputRef = React.createRef();
    }
    
    render() {
   	    return(
            <input type="text" ref={this.inputRef} />;
        )
    }
}

 

 

[Ref에 접근하기]

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

const refCurrent = this.inputRef.current;

 

ref의 값은 노드의 유형에 따라 다릅니다.

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

 

 

[예제]

자바스크립트 포커스와 리액트 Ref를 이용한 focus 비교하는 예제 입니다. Ref를 통해서 엘리먼트에 접근하는데 전혀 문제가 없습니다.

import React, { Component } from 'react';

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

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

    JavascriptFocus() {
        document.getElementById('id').focus();
    }

    render() {
        return(
            <>
            <input type="text" id="id" ref={this.inputRef}></input>
            <input type="button" value="Ref Focus" onClick={this.RefFocus}></input>
            <input type="button" value="Javascript Focus" onClick={this.JavascriptFocus}></input>
            </>
        )
    }
}

export default TestComponent;

 

실행 결과

References

react.org