리액트

5장 ref:DOM에 이름달기

KairoYang 2020. 4. 8. 09:19

div에 id로 이름달 듯이 dom에 이름다는 것을 ref라 한다.

id 사용 권하지 않는다.

ref는 dom을 직접 건드려야 할 때 사용한다.

dom을 꼭 사용해야 하는 상황: 특정 input에 포커스 주기, 스크롤 박스 조작하기, canvas 요소에 그림 그리기

ref 사용법:

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

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

 2.createRef 를통한 ref 설정:input = React.createRef();  넣고 ref를 설정한 dom에 접근하려면 this.input.current