Ref

0개요 

Ref는 'reference'의 약자로, '참조'라는 뜻이다. element가 참조하는 변수에 접근해 변경하고 element를 제어할 수 있다.

javascript나 jquery에서 id나 class와 같은 속성에 element로 접근하여 값을 가져오는 구조와 유사하나, 

표현 문법에서 차이를 보인다.

 

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

 

 

1.예시코드

 

1_a) 리액트 Ref

 constructor(props){     
        //  createRef()함수로 Ref변수 InputRef를 생성한다.
        this.InputRef = React.createRef();
    }

    RefFocus = (e) => {
    // inputRef를 할당해 참조하도록 한다.
    // ref를 부여한 요소에, current로 접근
        this.InputRef.current.focus();
    }
    
    render() {
        return (
            <>
             <input type="text" id='id' ref={this.InputRef}/>
             // 버튼형태의 input태그를 실행하므로 해서, RefFocus호출하여,
             // ref={this.InputRef}가 지정된 input태그가 focus된다
             <input type="button" value="Ref Focus" onClick={this.RefFocus}/>
            </>
        );
    }

1_b) javascript

JavascriptFocus(){
        document.getElementById('id').focus();
    }
    
    
    render() {
        return (
            <>
             <input type="text" id='id' ref={this.InputRef}/>
             // 버튼형태의 input 태그를 클릭하여 JavascriptFocus()호출하고,
             // id가 'id'로 지정된 input태그로 포커스가 지어진다
             <input type="button" value="Javascript Focus" onClick={this.JavascriptFocus}/>  
            </>
        );
    }

 

 

2 결론

•  React의 Ref와 , javascript 의 Element는 지정한 요소에 대해 접근할 수 있다. (위 코드에서는 RefFocus 함수와 javascript 함수는 동일하게 작동한다. )
•  Ref는 React.createRef()를 통해 생성되고, ref 어트리뷰트를 통해 React 엘리먼트에 부착하게 된다.

this.myRef = React.createRef();

• render() 안에서 ref가 엘리먼트게 전달되었을때, ref의 current 의 어트리뷰트에 담기게 된다.

const node = this.myRef.current;