[React] ref 알아보기
⏳ ref
ref는 Dom 요소에 ID를 지정해준다고 생각하면 좋을 것 같습니다.
html 에서는 여러 태그들에게 구분 key 를 부여해줄 때 id 를 사용했었습니다
이를 통해 특정 id 를 가진 dom 요소를 핸들링하며 작업을 할 수 있었습니다.
이처럼 react 에서도 dom 요소에 특정 key를 부여해주는 것이 바로 ref입니다.
🎈 사용 방법
ref 생성
constructor(props){
super(props)
this.input = React.createRef();
}
ref 적용
<input ref={this.input} ></input>
React.createRef(); 을 통해 ref를 생성하고 해당 태그에 ref={} 으로 적용할 수 있다.
🎐 활용
ref는 보통 state 만으로 해결할 수 없어, dom을 직접적으로 건드릴때 사용하게 됩니다.
ex) 특정 input 태그에 focus 지정, 스크롤박스 조작 등등..
활용 예시
constructor(props){
super(props)
this.onClickButton = this.onClickButton.bind(this);
this.input = React.createRef();
}
onClickButton(){
this.input.current.focus() 1️⃣
}
render() {
return (
<div>
<input ref={this.input} ></input>
<button onClick={this.onClickButton}>button</button>
</div>
)
}
일반적으로는 button이 클릭되면 input 태그에서 focus가 사라지지만 ref를 이용하면
소스 1을 통해서 해당 태그에 focus를 줄 수 있습니다.
🔺 콜백 함수를 이용해서 ref 설정하기
<input ref={(refCb)=>{this.input = refCb}}></input>
refCb 값을 파라미터로 전달받으며 컴포넌트의 멤버변수로 설정해줍니다.
예시
onClickButton(){
this.input.focus() 1️⃣
}
render() {
return (
<div>
<input ref={(refCb)=>{this.input = refCb}}></input>
<button onClick={this.onClickButton}>button</button>
</div>
)
}
콜백 으로 지정하는 경우 React.createRef()를 통해 생성된 ref를 전달하는 대신,
함수를 전달합니다.
Author And Source
이 문제에 관하여([React] ref 알아보기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@th0532/React-ref-알아보기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)