리액트
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