React - Ref

Ref

: DOM 요소나 React 컴포넌트에 대한 참조를 생성하고 관리하는데 사용되는 특별한 속성

   render 메소드에서 생성된 DOM 노드나 React 엘리먼트에 접근하는 방법을 제공

 

1. 사용방법

1) 콜백 ref useRef 를 이용

class MyComponent extends Component {

    const handler = () => {
		this.myref.focus();
	}
	render() {
		return <input ref={ x => this.myinput = x } />;
	}
}

2) React.createRef() API를이용 => current 사용하는거 잊지 말기

class MyComponent extends React.Component {
	constructor() {
		super();
		this.myref = React.createRef();
	}
	render() {
		return <input type="text" ref={this.myref} />;
	}
	const handler = () => {
		this.myref.current.focus();
	}
}

2. 예시

password 검증 컴포넌트

-  패스워드 입력창에 입력된 값이 "0000"와 일치하는 여부를 판단

   일치하면 패스워드 입력창의 색깔을 파란색으로, 일치하지 않으면 패스워드 입력창의 색깔을 붉은색으로 설정

import { Component } from "react";

class ValidatePassword extends Component {
    state = {
        password: '',
        isValid: false
    };
    handlerPasswordChange = e => this.setState({ password: e.target.value });
    handlerPasswordCheck = () => {
        if (this.state.password === '0000') {
            this.setState({ isValid: true });
        } else {
            this.setState({ isValid: false });
        }
    };
    render() {
        return (
            <>
                <input type="password" 
                    value={this.state.password} 
                    onChange={this.handlerPasswordChange} 
                    style={this.state.isValid ? {backgroundColor: 'blue'} : {backgroundColor: 'red'}} />
                <button onClick={this.handlerPasswordCheck}>패스워드 검증</button>
            </>
        );
    }
}
export default ValidatePassword;

+) 패스워드를 잘못 입력했을 때 패스워드 입력창에 포커스를 전달하기

1) 콜백 ref 이용

import { Component } from "react";

class ValidatePassword extends Component {
    state = {
        password: '',
        isValid: false
    };
    handlerPasswordChange = e => this.setState({ password: e.target.value });
    handlerPasswordCheck = () => {
        if (this.state.password === '0000') {
            this.setState({ isValid: true });
        } else {
            this.setState({ isValid: false });
            console.log(this.passwordInput);
            this.passwordInput.focus();
        }
    };
    render() {
        return (
            <>
                <input type="password" 
                    ref={ x => this.passwordInput = x }
                    value={this.state.password} 
                    onChange={this.handlerPasswordChange} 
                    style={this.state.isValid ? {backgroundColor: 'blue'} : {backgroundColor: 'red'}} />
                <button onClick={this.handlerPasswordCheck}>패스워드 검증</button>
            </>
        );
    }
}
export default ValidatePassword;

2) React.createRef()를 이용

import React, { Component } from "react";

class ValidatePassword extends Component {
    state = {
        password: '',
        isValid: false
    };

    passwordInput = React.createRef();

    handlerPasswordChange = e => this.setState({ password: e.target.value });
    handlerPasswordCheck = () => {
        if (this.state.password === '0000') {
            this.setState({ isValid: true });
        } else {
            this.setState({ isValid: false });
            console.log(this.passwordInput);
            console.log(this.passwordInput.current);
            this.passwordInput.current.focus();
        }
    };
    render() {
        return (
            <>
                <input type="password" 
                    ref={this.passwordInput}
                    value={this.state.password} 
                    onChange={this.handlerPasswordChange} 
                    style={this.state.isValid ? {backgroundColor: 'blue'} : {backgroundColor: 'red'}} />
                <button onClick={this.handlerPasswordCheck}>패스워드 검증</button>
            </>
        );
    }
}
export default ValidatePassword;