[React] ref

오늘은 ref에 대해서 공부해보았다. 

리액트를 다루는 기술 책을 보면서 공부를 하다가 ref에 대해서 이해가 부족해서 공식문서를 찾아보게 되었다.

ko.reactjs.org/docs/refs-and-the-dom.html

 

ref(Reference)

ref는 레퍼런스라는 뜻인데, 이를 번역하면 참조라는 말이다.

과연 코딩에서 참조라는 것은 어떤 것을 뜻하는 것일까?

원래 다른 언어를 배울 때, 참조는 복제와 비교가 되었었다.

복제는 파일을 복사하는 것이라면, 참조는 바로가기를 만드는 것과 같다고 비유되었다.

참조는 원본 파일에 대한 주소 값이 담겨있어서 누군가가 이 바로가기에 접근했다면 여기에 저장된 원본의 주소를 참조해서 원본의 위치를 알아내고 원본에 대한 작업을 하게 되는 것이다.

 

쉽게 말하면, 원격으로 제어할 수 있게 만드는 것이라고 볼 수 있다🤔

 

ref를 사용하는 이유!

DOM을 꼭 직접적으로 건드려야 할 때

• 포커스, 텍스트 선택영역, 미디어의 재생 관리 시
• 애니메이션을 직접적으로 실행할 때
• 서드 파티 DOM 라이브러리를 React와 같이 사용할 때
• 특정 input에 포커스 주기
• 스크롤 박스 조작하기
• Canvas 요소에 그림 그리기

state를 사용해서 필요한 기능을 구현했지만, state만으로 해결할 수 없는 경우에 적용한다.

 

여기서 input에 포커스를 주는 예제를 해볼건데, 나는 input에 포커스를 준다는 말의 의미를 처음에 몰랐다.

input에 포커스를 준다는 말은!  

보통 input창을 구현해서 데이터를 집어넣고 옆에 입력버튼을 누르게 되면 커서가 깜빡이는 효과가 사라져 다시 input값을 넣고 싶은 경우에 다시 input창을 누르고 작성해야된다는 점입니다.

따라서, input창에 포커스를 주게 되면 예제에서의 '검정하기'버튼을 누르고도 바로 다른 값을 검정해볼 수 있다!!

 

//ref 사용 전 코드

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',  //password가 0000일때 true로 반환
            password: ''
        })
    }

    onKeyPress = (e) => {
        if (e.key === 'Enter') {
            this.handleButtonClick();
        }
    }

    render() {
        return (
            <div>
                <input
                    type='password'
                    value={this.state.password}
                    onChange={this.handleChange}
                    className={this.state.clicked ? (this.state.validated ? 'success' : 'failure') : ''} 
                    {/*클릭을 했는데, 비밀번호가 0000일 경우 success를 반환!*/}
                    onKeyPress={this.onKeyPress}
                />
                <button onClick={this.handleButtonClick}>검증하기</button>
            </div>
        );
    }
}

export default ValidationSample;

 

이 코드에서 인풋에 포커스를 줘보겠습니다!

 

                <input 
                    ref = {(ref) => this.input=ref}
                    type='password'
                    value={this.state.password}
                    onChange={this.handleChange}
                    className={this.state.clicked ? (this.state.validated ? 'success' : 'failure') : ''} 
                    {/*클릭을 했는데, 비밀번호가 0000일 경우 success를 반환!*/}
                    onKeyPress={this.onKeyPress}
                />

 

input 태그 안에 ref를 달아보았습니다!

여기서 주의할 점!!

ref를 달았으면 선언을 해줘야겠죠? 

render함수 전에 input; 으로 호출하거나 마지막 동작인 handleButtonClick 함수 안에 this.input.focus();로 실행 시켜줘도됩니다.

 

handleButtonClick = () => {
        this.setState({
            clicked: true,
            validated: this.state.password === '0000',  //password가 0000일때 true로 반환하라는 건가?
            password: ''
        })
    //두번째 방법
    this.input.focus();
    }

    //첫번째 방법
    input;
}

 

공부하다보니 ref는 번거로움을 줄여주는 기능인 것 같다고 생각이 들었다.

그 부분을 원격으로 지정할 수 있도록(?) 도와주는 것 같다고 나는 이해를 했다!

이런 걸 보니 게으른 사람이 서비스를 만들어낸다는 것이 더 와닿는 것 같았다

더 편한 서비스를 만들기 위해서 나도 계속 공부해야겠다!!