ref는 DOM을 직접적으로 건드려야 할 때 사용합니다.
- 특정 input에 포커스 주기
- 스크롤 박스 조작하기
- Canvas 요소에 그림 그리기 등
ref 설정
1. 콜백 함수로 ref 설정
2. createRef 설정
class 내에서 선언하고, 내부 변수에 props로 넣어 사용합니다.
this.input.current로 조회하여 사용합니다.
예시
버튼을 눌렀을 때 맨 위나 맨 아래로 내리는 경우 DOM 노드의 값을 사용합니다.
- scrollTop: 세로 스크롤바 위치
- scrollHeight: 스크롤이 있는 박스 안쪽의 박스 높이
- clientHeigth: 스크롤이 있는 박스의 높이
*scrollHeight > clientHeigth 의 경우 스크롤이 생깁니다.
