특정 DOM에 작업을 해야 할 때 ref를 사용하는 것인데 DOM을 꼭 직접적으로 건드려야 할 때 쓰인다. 마치 HTML의 id라고 보면 된다.
ref를 사용하려면 Hooks를 사용해야한다.
💡
DOM을 꼭 사용해야 하는 상황 : 필요한 기능을 state를 통해서 개발 했지만 해결 할 수 없는 기능들이 있다 이럴 때 접근 해야 하는 것들 1. 특정 input에 포커스 주기 2. 스크롤 박스 조작하기 3. Canvas 요소에 그림 그리기
ref사용
콜백 함수를 통한 ref 설정
<input ref={(ref) => {this.input=ref}} />이렇게하면 ref의 이름은 원하는 것으로 자유롭게 지정할 수 있다.
createRef를 통한 ref 설정
import React, { Component } from 'react'; class RefSample extends Component { input = React.createRef(); handleFocus = () => { this.input.current.focus(); } render() { return ( <div> <input ref={this.input} /> </div> ); } }16.3 버전 부터 사용 할 수 있으며 createRef를 사용하여 ref를 만들려면 우선 컴포넌트 내부에 멤버 변수로 React.createRef()를 담아 줘야 하며 ref를 달고자 하는 요소에 ref props를 넣어주면 ref 설정이 된다.
컴포넌트 ref
<MyComponent ref={(ref) => {this.myComponent=ref}} />이런 식으로 작성을 하면 내부의 메서드 및 멤버 변수에도 접근할 수 있습니다. 즉, 내부의 ref에도 접근할 수 있습니다
- 컴포넌트 만들기
- 컴포넌트에 ref 달기
- ref를 이용하여 컴포넌트 내부 메서드 호출
Uploaded by Notion2Tistory v1.1.0