[React] ref : DOM에 이름 달기

ref 이해하기

HTML에서는 DOM 요소에 이름을 달 때는 id를 사용한다. HTML에서 id를 사용하여 DOM에 이름을 다는 것 처럼 리액트 포르젝트 내부에서 DOM에 이름을 다는 방법이 바로 ref 이다.

1. ref는 어떤 상황에서 사용하는지

바로 말 하자면 ref는 DOM을 꼭 직접적으로 건드려야 할 때 사용한다. 이렇게 말하면 이해하기 어려워서 예제코드를 해보았다.
src 밑에 ValidationSample.css와 ValidationSample.js 파일을 만들었다.

ValidationSample.css

.success {
    background-color: lightgreen;
}

.failure {
    background-color: lightcoral;
}

ValidationSample.js

import React, { Component } from 'react';
import './ValidationSample.css';
class ValidationSample extends Component {
    state={
        password : '',
        clicked : false,
        validated : false
    }

    handleChange = (e) => {
        this.setState({
            password: e.target.value
        });
    }

    handleButtonClick= ()=>{
        this.setState({
            clicked : true,
            validated : this.state.password === '0000'
        })
    }
    render() {
        return (
            <div>
                <input
                    type="password"
                    value = {this.state.password}
                    onChange = {this.handleChange}
                    className = {this.state.clicked ? (this.state.validated ? 'success' : 'failure') : ''}
                />
                <button onClick = {this.handleButtonClick}>검증하기</button>
            </div>
        );
    }
}

export default ValidationSample;

input에서는 onChange 이벤트가 발생하면 handleChange를 호출하여 state의 password 값을 업데이트하게 했다. button에서는 onClick 이벤트가 발생하면 handleButtonClick을 호출하여 clicked 값을 참으로 설정했고, validated 값을 검증 결과로 설정했다.

0000을 입력하고 검증하기를 누르면 이런 결과가 나온다.

DOM을 꼭 사용해야 하는 상황은

1. 특정 input에 포커스 주기
2. 스크롤 박스 조작하기
3. Canvas 요소에 그림 그리기 등

이 있다. 이럴 때는 어쩔 수 없이 DOM에 직접적으로 접근해야 하는데, 이를 위해 바로 ref를 사용한다.

2. ref 사용하기

2.1 콜백 함수를 통한 ref 설정

ref를 만드는 가장 기본적인 방법이다. ref를 달고자 하는 요소에 ref라는 콜백 함수를 props로 전달해 주면 된다. 다음은 사용 예시이다.

<input ref={(ref)=>{this.input=ref}} />

2.2 createRef를 통한 ref 설정

또 다른 방법은 리액트에 내장되어 있는 createRef라는 함수를 사용하는 것이다.

input = React.createRef();

handleFocus() =>{
	this.input.current.focus();
}
render(){
	return(
    		<div>
        		<input ref={this.input}/>
		</div>
        )
}

나중에 ref를 설정해 준 DOM에 접근할 때는 this.input.current를 조회하면 된다. 콜백함수와 다른 점은 뒷부분에 .current를 넣어 주어야 하는 것이다.