ref

[ ref란? ]

• Reference
• 전연적으로 작동하지 않고 컴포넌트 내부에서 선언 및 사용된다.
• 동일한 컴포넌트를 반복해 사용해도 각 컴포넌트 내부에서만 동작하기 때문에 중복되지 않는다.
• DOM을 직접적으로 건드려야 할 때 사용한다
  
  

[ id vs. ref ]

HTML에서는 id를 지정하여 DOM요소에 접근하였는데, React에서는 컴포넌트를 반복하여 사용하면 id가 중복되기 때문에 컴포넌트 내부에서 동작하는 ref를 사용한다.

[ ref 사용 방법 ]

1. 콜백 함수
2. 내장 함수 createRef

import React, {Component, createRef} from 'react';

class Ref extends Component {
	
    // 콜백 함수
    event1 = () => {
        console.log(this.input1.value);
    }

    // createRef
    input2 = React.createRef();
    event2 = () => {
        console.log(this.input2.current.value);
    }

    render() {
        return (
            <div>
                <div>
          			// 콜백 함수
                    <input type="text" ref={(ref) => {this.input1 = ref}} />
                    <button onClick={this.event1}>버튼1</button>
                </div>
                <div>
                    // createRef
                    <input type="text" ref={this.input2}></input>
                    <button onClick={this.event2}>버튼2</button>
                </div>
            </div>
        )
    }
}

export default Ref;