[React - Study]

useRef 란?

특정 DOM 선택하기

JavaScript

JavaScript 에서는 getElementById , querySelector 같은 DOM Selector 함수를 사용해서 DOM을 선택한다.

---

React

ref라는 것을 이용하여 DOM을 선택한다.

클래스 컴포넌트

React.createRef 를 사용

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

함수형 컴포넌트

useRef 를 사용

function MyComponent() {
	const MyRef = useRef(null);
    return (
    	<div ref={myRef}/>
    );
}

ex ) MyRef.current.click() / MyRef.current.focus()

---

DOM을 직접 선택해야 할 경우들

1. 엘리먼트 크기를 가져와야 할 때
2. 스크롤바 위치를 가져와야 할 때
3. 엘리먼트에 포커스를 설정 해줘야 할 때 등

---