1. ref (reference)

• reference 의 준말로 리액트 내부에서 DOM 에 이름을 다는 방법이다.
• DOM 을 직접적으로 건드려야 할 때 사용한다.
• DOM 을 꼭 사용해야하는 상황 예시
  👉 특정 input 에 포커싱을 줄 때
  👉 스크롤 박스를 조작할 때
  👉 Canvas 요소에 그림을 그릴 때

2. ref 사용

• ref는 콜백함수 와 createRef 두 가지 방법으로 사용한다.
• 콜백함수 사용시 ref 값을 파라미터로 전달 받고 컴포넌트의 멤버 변수로 설정하면 된다.
• createRef 사용 시 멤버 변수로 담아 해당 멤버 변수를 ref를 달고자 하는 요소의 ref props로 넣어 주면 된다.

3. 사용 방법 (컴포넌트에 ref 달기)

• 컴포넌트 외부
  

  • 컴포넌트에 ref 를 달면 내부 메서드 및 멤버 변수에 접근할 수 있다.
  • 여기 주의할 점
    🤜 문법 상으로는 문제가 없지만 처음 렌더링될 때 this.scrollbox 는 undefined 이다.
    🤜 scrollBottom 메소드를 호출할 수 없어 에러가 발생한다.
    🤜 화살표 함수로 감아 새로운 함수를 만들면 초기 렌더링 후 실행되어 문제가 발생하지 않는다.

• 컴포넌트 내부
  

  • 멤버변수 this.box 는 바깥 div 를 box가리킨다.
  • scrollBottom 메소드는 클릭 이벤트 함수로 클릭 시 바깥 div 의 scrollTop을 전체 스크롤 높이에서 div 의 높이만큼 뺀 값으로 이동한다.