ref

id

일반 HTML에서 DOM 요소에 이름을 달 때는 id를 사용한다. 특정 DOM 요소에 어떤 작업을 할 때 id를 달아서 특정 id에 스타일을 적용하거나 자바스크립트를 적용한다.

react에서는 해당 id에 컴포넌트를 렌더링하라는 코드가 있다.

ReactDOM.render(<App />, document.getElementById('root'));

HTML 처럼 프로젝트 내부에서 DOM에 이름을 다는 방법이 있는데 이를 ref 라고 한다.

 

ref 사용 상황

DOM을 꼭 직접적으로 건드려야 할 때 사용한다. 예를 들어, 특정 input에 포커스 주기, 스크롤 박스 조작하기, Canvas 등이 있다.

 

createRef()

React에 내장되어 있는 createRef 함수를 사용해 ref를 설정할 수 있다. 설정하는 방법은 다음과 같다.

	import React, { Component } from 'react';
	import './RefSample.css';
	class RefSample extends Component {
	state = {
	password : '',
	clicked : false,
	validated : false,
	}
	// 멤버 변수로 React.createRef()를 담아줌
	input = React.createRef();
	handleChange = (e) => {
	this.setState({
	password : e.target.value
	});
	}
	handleButtonClick = () => {
	this.setState({
	clicked : true,
	validated : this.state.password === '0000'
	});
	// setState가 끝나고 input이 있는 곳으로 포커스 옮김
	this.input.current.focus();
	}
	render() {
	return (
	<div>
	{/*ref 달고자 하는 요소에 멤버 변수를 ref props로 넣어준다*/}
	<input
	type="password"
	value={this.state.password}
	onChange={this.handleChange}
	className={this.state.clicked ? (this.state.validated ? 'success' : 'failure') : ''}
	// ref 적용
	ref={ this.input }
	/>
	<button
	onClick={this.handleButtonClick}
	>validate</button>
	</div>
	);
	}
	}
	export default RefSample;

view raw ex.js hosted with ❤ by GitHub

 

컴포넌트에 ref 달기

	import React, { Component } from 'react';
	class ScrollBox extends Component {
	input = React.createRef();
	render() {
	const style = {
	border : '1px solid black',
	height : '300px',
	width : '300px',
	overflow : 'auto',
	position : 'relative'
	};
	const innerStyle = {
	width : '100%',
	height : '650px',
	background : 'linear-gradient(white, black)'
	};
	return (
	<div
	style={style}
	ref={this.input.box}
	>
	<div style={innerStyle}></div>
	</div>
	);
	}
	}
	export default ScrollBox;

view raw ex.js hosted with ❤ by GitHub