📝 ref
HTML에서 id를 사용하여 DOM에 이름을 다는 것처럼 React프로젝트 내부에서 DOM에 이름을 다는 방법이
ref(reference)개념입니다.
🔎 함수형 컴포넌트에서 ref를 사용하려면 Hooks를 사용해야 하기 때문에
Class형 컴포넌트 먼저 알아보겠습니다.
📜 ref는 어떤 상황에서 사용해야 할까
- React에서 state로만 해결할 수 없고, DOM을 반드시
직접 건드려야 할 때사용하게 됩니다.- ex) 특정 input에 focus주기, scroll box 조작, canvas 요소에 그림 그리기 등
📜 Class형 컴포넌트 - 콜백 함수를 통한 ref 설정하기
- ref를 만드는 가장 기본적인 방법은
콜백 함수를 사용하는 것입니다. - ref를 달고자 하는 요소에 ref라는 콜백 함수를
props로 전달해 주면 됩니다. - 이 콜백 함수는 ref 값을 파라미터로 전달받습니다.
- 그리고 함수 내부에서 파라미터로 받은 ref를 컴포넌트의 멤버 변수로 설정해 줍니다.
<input
ref={(ref) => {
this.input = ref;
}}
/>위의 input 요소는 앞으로 react 코드 내에서 this.input을 통하여 접근이 가능해집니다.
this.input 말고 사용자가 원하는 어떤 이름이라도 자유롭게 가능합니다.
이는 react 내에서 id 처럼 쓰이게 된 것입니다.
📜 Class형 컴포넌트 - createRef를 통한 ref 설정
ref를 만드는 또 다른 방법은 react에 내장되어 있는 createRef라는 함수를 사용하는 것입니다.
이 기능은 react v16.3부터 도입되었으며 이전 버전에서는 작동하지 않습니다.
import { Component } from 'react';
class Sample extends Component{
input = React.createRef();
handleFocus = () => {
this.input.current.focus();
}
render(){
return(
<div>
<input ref={this.input} />
</div>
)
}
}
export default Sample;- createRef를 사용하여 ref를 만들려면 우선 컴포넌트 내부에서 멤버 변수로
React.createRef()를 담아주어야 합니다. - 해당 멤버 변수를 ref를 달고자 하는 요소에
ref props로 넣어 주면 ref 설정이 완료됩니다. - 설정한 뒤 나중에 ref를 설정해 준 DOM에 접근하려면
this.input.current를 조회하면 됩니다. - 콜백 함수를 사용할 때와 다른 점은 뒷부분에
.current를 넣어 주어야 한다는 것입니다.
📜 컴포넌트에 ref 달기
react에서는 컴포넌트에도 ref를 달 수 있습니다. 이 방법은 주로 컴포넌트 내부에 있는 DOM을 컴포넌트 외부에서 사용할 때 씁니다. DOM에 ref를 다는 방법과 똑같습니다.
<MyComponent
ref={(ref) => {this.myComponent}}
/>이렇게 하면 MyComponent 내부의 메서드 및 멤버 변수에도 접근할 수 있습니다.
Frontend Developer