React. ref
HTML에서 id를 사용하여 DOM에 이름을 다는 것처럼
리액트 프로젝트 내부에서도 같은 방법이 있습니다.
바로 ref(reference의 줄임말) 개념입니다
ref를 사용할 수 있는 상황
DOM을 꼭 직접적으로 건드려야 할 때 사용
예시
- 특정 element에 포커스 주기
- 스크롤 박스 조작하기
- Canvas 요소에 그림 그리기 등
ref 사용법
- 콜백 함수를 통한 ref 설정.
ref를 만드는 가장 기본적인 방법 : 콜백 함수 사용
ref를 달고자 하는 요소에 ref라는 콜백 함수를 props로
전달한다.
이 콜백 함수는 ref값을 파라미터로 전달 받는다.
그리고 함수 내부에서 파라미터로 받은 ref를
컴포넌트의 멤버 변수로 설정해 준다.
<input ref={(superInput) => {this.input=superInput}}/>2.createRef를 통한 ref 설정
ref를 만드는 또 다른 방법은 리엑트에 내장되어 있는
createRef라는 함수를 사용하는 것.
이 함수를 사용해서 만들면 더 적은 코드로 쉽게 사용이
가능하다.
idInput = React.createRef(); // 맴버변수
<input ref={this.idInput} />