React 자습 - Ref

1. Ref

ref : HTML에서 id를 사용하여 DOM에 이름을 달듯이 React에서 DOM에 이름을 다는 것
전역적으로 작용하지 않고 컴포넌트 내부에서만 작동

2. Ref를 사용해야 할 때

• DOM을 직접적으로 건드려야 할 때
  ex) 특정 input에 포커스 주기 / 스크롤 박스 조작 / Canvas 요소에 그림 그리기 / 애니메이션 실행 등...

3. Ref 사용

1. 콜백 함수를 통한 ref 설정 - ref를 달고자 하는 요소에 ref라는 콜백 함수를 props로 전달
2. createRef 사용
   • 컴포넌트 내부에서 멤버 변수로 React.createRef() 담은 후 해당 멤버 변수를 ref를 달고자 하는 요소에 ref props로 넣음
   • 설정 후 ref를 설정해 준 DOM에 접근하려면 this.input.current 조회
3. 컴포넌트에 Ref 달기 <MyComponent ref={(ref) => {this.myComponent=ref}} />

4. 주의점

• onClick = {this.scrollBox.scrollBottom} 과 같은 문법은 틀리지 않으나, 컴포넌트가 처음 렌더링될 때는 this.scrollBox의 값이 undefined이므로 값을 읽어오는 과정에서 오류가 발생한다.
  따라서 화살표 함수 문법을 사용해서 아예 새로운 함수를 만들고 그 내부에서 this.scrollBox.scrollToBottom 메서드를 실행하면 오류가 발생하지 않는다.