[React] Ref

Ref

Class Component 에서 Ref 는 render 메서드에서 생성된 DOM 노드나 React 엘리먼트에 접근하는 방법을 제공한다.

Ref 활용

- 포커스, 텍스트 선택영역, 미디어의 재생관리

- 애니메이션을 직접적으로 실행시킬 때

- 서드 파티 DOM 라이브러리를 React와 같이 사용할 때

아래의 예제 코드를 보자

import React, { Component } from 'react'

export default class Click extends Component {

state = {

like: 0,

}

handleIncrease = () => {

this.setState(prevState => ({

like: prevState.like + 1

}))

}

handleDecreasse = () => {

this.setState((prevState) => ({

like: prevState.like - 1

}))

}

accessDom = (tag) => {

console.log(tag);

}

render() {

console.log('렌더링 되었다');

const { like } = this.state;

return (

<div>

{like}

<div>

<button

ref={this.accessDom}

onClick={this.handleIncrease}>+</button>

<button

ref={this.accessDom}

onClick={this.handleDecreasse}>-</button>

</div>

</div>

)

}

}

결과값

ref 를 작성한 DOM요소를 출력해 보았다. Ref에 작성한 함수의 인자로 해당 DOM이 전달된다.

JavaScript를 공부하며 DOM에 접근할때 사용해었던 document.querySelector() 처럼 

접근하고자하는 DOM의 속성으로 ref 를 작성하면 DOM에 직접 접근할 수 있다.

accessDom = (tag) => {

tag.textContent = '버튼'

}

이러한 코드를 작성하여 + 와 - 버튼을 "버튼"이라고 변경할 수 있다.

이외에도

class GuGuDan extends React.Component {

...

...

input;

onRefInput = (e) => { this.input = e };

render() {

console.log("랜더링")

return (

<>

<div>{this.state.first}곱하기{this.state.second}는?</div>

<form onSubmit={this.onSubmit}>

<input ref={this.onRefInput} type="number" value={this.state.value} onChange={this.onChange} />

<button>입력</button>

</form>

<div>{this.state.result}</div>

</>

);

}

특정 DOM에 focus를 준다던지, 크기를 가져와야한다던지, 스크롤 위치를 설정한다던지 와같은 DOM에 직접적인 접근이 필요할때도 사용한다.

태그의 속성으로 ref={}을 작성한다. 만약 input태그에 focus를 주고싶다면 위에 코드처럼 작성해 준다.

ref안에 직접적으로 함수를 적지않은 이유는 input태그안에 값이 바뀔때마다 매번 render함수가 호출되는데 

이때 함수가 계속해서 선언되어 메모리 자원을 효율적으로 사용하지 못하게된다. 그러므로 함수는 class영역 안에 작성한다.