React) Ref란?

Ref 

---

What is Ref ?

HTML에서는 DOM 마다 id로 이름을 달 수 있습니다. 리액트는 id 대신 reference의 줄임말인, ref로 이름을 달 수 있습니다. 

 

id는 unique해야 하는데 리액트에서는 컴포넌트 재사용이 많은데 이런 상황에서 id가 중복이 발생하기 때문에 리액트에서도 id를 사용할 수 있지만 사용을 권장하지는 않고 있습니다. 특수한 경우, id를 사용해야 한다면 id 뒷 부분에 추가 텍스트를 붙여 (btn 1, btn2,...) 중복 id 발생을 방지해야 합니다.

---

When to use 

ref는 DOM을 직접 건드려야 할 때 사용하는 것입니다.

예를 들어

• 특정 input에 focus 주기
• 스크롤 박스 조작하기
• canvas 요소에 그림 그리기 등

의 작업을 할 때에는 DOM에 직접 접근해야 하기 때문에 ref를 사용해야 합니다.

---

ref using callback function

ref를 달고자 하는 요소에 ref라는 콜백 함수를 props로 전달합니다. ref 함수는 ref 값을 파라미터로 전달 받고, 이를 컴포넌트의 멤버변수를 설정해줍니다.

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

이렇게 하면 앞으로 this.input은 input 요소의 DOM을 가리키게 됩니다. 

---

ref using createRef()

또는 리액트에 내장되어 있는 createRef() 함수를 사용할 수 있습니다. 이 내장 함수는 리액트 16.3 버전 부터 도임되어 이전 버전에서는 작동하지 않습니다. 

import React, { useState } from 'react';
import './validation.css';

const staticPassword = '0000';

const Validation = () => {
    let reference = React.createRef();

    const [password, setPassword] = useState('');
    const [clicked, setClicked] = useState(false);
    const [validated, setValidated] = useState(false);

    const handleChange = e => {
        setPassword(e.target.value);
    }

    const handleClick = () =>{
        setClicked(true);
        setValidated(password===staticPassword);
        reference.current.focus();
    }

    return(
        <div>
            <h1>Ref Practice</h1>
            <input 
                ref={reference}
                type='password'
                value={password}
                onChange={handleChange}
                className={clicked ? (validated ? 'success' : 'failure') :''}
            />
            <button onClick={handleClick}>Validate</button>
        </div>
    );
}

export default Validation;

createRef()를 컴포넌트 reference라는 멤버 변수로 담아 줍니다. 

그리고 이 멤버 변수를 ref로 달고자 하는 요소에 ref props로 전달해주면 됩니다. 

이후 부터는 ref를 설정한 DOM에 접근하려면 reference.current를 조회하면 됩니다. 

이 코드를 브라우저에 띄우면 이렇게 나오는데 handleClick 함수에서 reference 라고 ref를 달아준 input 요소에 focus() 하는 코드가 실행되어 validate 버튼을 누르면 input으로 바로 focus가 넘어가게 됩니다. 

---

References

• 리액트를 다루는 기술 (김민준)