React 5장

ref(reference) : 리액트 프로젝트 내부에서 DOM 에 이름을 다는 방법

• 리액트 컴포넌트 안에서는 id를 쓰지 않는다 (button01, button02, button03... 방지)
• ref를 써야 할 상황 - DOM을 꼭 직접적으로 건드려야 할 때.

DOM을 꼭 사용해야 하는 상황

가끔 state만으로 해결할 수 없는 기능 이 있다.

• 특정 input에 포커스 주기
• 스크롤 박스 조작하기
• Canvas 요소에 그림 그리기

이때는 어쩔 수 없이 DOM에 직접적으로 접근해야 하는데 이를 위해 바로 ref 를 사용한다
ref를 사용하는 방법은 두가지이다.

콜백 함수를 통한 ref 설정

1. ref 를 달고자 하는 요소에 ref 라는 콜백 함수를 props로 전달
2. 이 콜백 함수는 ref 값을 파라미터로 전달 받음
3. 함수 내부에서 파라미터로 받은 ref 를 컴포넌트의 멤버 변수로 설정

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

이렇게 하면 앞으로 this.input은 input 요소의 DOM을 가리킨다. ref의 이름은 원하는 것으로 자유롭게 지정 가능. DOM 타입과 관계 없이 this.superman = ref 처럼 마음대로 지정한다.

createRef를 통한 설정

ref를 만드는 또 다른 방법은 리액트에 내장되어 있는 createRef라는 함수를 사용.(v16.3부터)

class RefSample extends Component {
	input = React.createRef();
    
    handleFocus = () => {
    	this.input.current.focus();
    }
    
    render() {
    	return {
        	<div>
            	<input ref={this.input} />
            </div>
        }
    }
}

컴포넌트에 ref 달기

주로 컴포넌트 내부에 있는 DOM을 컴포넌트 외부에서 사용할때 쓴다.
*주의 : 서로 다른 컴포넌트 끼리 ref를 사용하지 않는다. 컴포넌트에 ref를 달고 그 ref를 다른 컴퐅넌트로 전달하고... 구조가 꼬여 유지보수 힘들다. 컴포넌트 끼리 데이터를 주고 받을 떄는 언제나 데이터를 부모 <-> 자식 흐름으로 교류 해야한다.