4. ref를 이용하여 Dom에 이름달기

• React에서 DOM을 직접 사용해야할 경우 ( state만으로 해결할 수 없는 경우 ) ref를 사용한다.
  • 특정 input에 포커스 주기
  • 스크롤박스 조작하기
  • Canvas요소에 그림 그리기 등
• ref를 사용하는 방법
  • 콜백 함수를 통한 ref 설정 : ref를 달아야하는 요소에 ref라는 콜백 함수를 props로 직접 전달한다.

<input ref={ (ref) => { this.inputRef = ref } } />

• createRef를 통한 ref설정 : 리엑트 v16.3 이후부터 도입된 createRef 함수를 사용한다.
  • 설정 이후 해당 ref를 가져올 경우 this.inputRef.current를 이용해 접근이 가능하다.

inputRef = React.createRef();
render(){
	return(
		<div> <input ref={this.inputRef} /> </div>
	)
}

• 컴포넌트에 ref달기 : 컴포넌트 isComponent 내부의 메서드 및 멤버변수에도 접근이 가능하다.

<isComponent ref = { (ref) => {this.isComponentRef = ref }} />

• React의 특성 상 ref를 통한 서로다른 컴포넌트 간 교류는 해서는 안된다. 앱 규모가 커지면 스파게티 코드처럼 구조가 꼬여 유지보수의 어려움을 겪기 때문이다 그러므로, 서로 다른 컴포넌트 간 교류가 아닌 부모 <-> 자식 간 교류에만 활용할 수 있도록 하여야 하기에 ref를 사용할 경우인지 다시한번 확인하여야 하며, 함수 컴포넌트의 경우 useRef라는 Hook 함수를 사용한다.

https://ko.reactjs.org/docs/refs-and-the-dom.html