[React] ref

1. ref

HTML을 작성할 때 요소에 식별가능한 유일한 이름을 줄때 id를 이용했습니다. 그리고 id를 가지고 이런저런 작업들을 했었는데 이 기능을 리액트에서 이용할 수 있게 해주는 게 ref입니다. ref는 리액트에서 컴포넌트에 이름을 붙여주는 것 입니다.

id를 쓰면 자바스크립트~리액트 모든 곳에서 접근할 수 있는데 왜 굳이 리액트에서 ref를 따로 사용하냐면, id속성은 유일한 중복되지 않는 이름입니다. 그래서 리액트 특성상 종종 같은 컴포넌트를 여러번 사용할 때가 있는데, 이렇게 된다면 id가 중복되어서 오류가 발생해버리고 맙니다. 그래서 ref를 id대신 사용하도록 권장되고 있습니다. 리액트의 기능이니 만큼 ref는 리액트 컴포넌트 내부에서만 작동하기에 외부와 충돌할 염려도 없다는 것도 하나의 장점입니다.

 

 

2. ref의 사용

리액트가 ref를 지원하고 있지만 공식문서에서는 남발하지 않고, 가급적이면 사용을 자제하라고 합니다. 그러면 ref는 과연 어떤 경우에 사용하는 것이 좋을까요? 한 문장으로 정리하면 'DOM 요소를 직접적으로 건드려야만 하는 경우' 입니다. 이 경우들은 크게 다음 세가지 경우입니다.

• 포커스를 주거나, 텍스트 선택 영역, 미디어의 재생 관리
• 애니메이션의 직접적인 실행
• 서드 파티 DOM 라이브러리를 리액트와 함께 사용하기

 

우선 ref의 생성법을 알아보겠습니다. ref는 React.createRef()함수를 통해 생성됩니다. 이는 React 16.3 버전에서 추가된 기능인데, 그 전까지는 콜백의 형태로 ref를 생성했습니다.

콜백 방식은 간단히 한 줄로 소개하겠습니다.

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

 

createRef()를 통한 ref의 생성법은 다음과 같습니다. 컴포넌트 생성자에서 ref를 담을 변수를 만들고 createRef()를 담습니다. 그리고 담아낸 변수를 ref를 달고 싶은 요소에 props로 전달하면 ref의 생성이 완료됩니다.

import React, {Component} from 'react';

class RefPractice extends Component {
    constructor(props) {
        super(props);
        
        //ref 담을 변수 생성
        this.myRef = React.createRef();
    }

    render() {
        return (
            //ref 넣고자 하는 요소에 this.ref이름 형식으로 전달 
            <div ref={this.myRef}/>
        );
    }
};

export default RefPractice;

 

추가적으로 컴포넌트에도 ref를 달 수 있습니다. 이렇게 컴포넌트에 ref를 달면 컴포넌트 내부의 메소드, 이벤트, 변수 등에 접근할 수 있게 됩니다.

<RefPractice ref = {(ref) => {this.접근하고 싶은 요소}} />

 

마지막으로, 다시 한 번 강조하지만 ref는 공식문서에도 필요한 경우가 아니면 사용을 지양하고 있기 때문에 편리해 보이는 문법이지만 남발해서는 안됩니다.

---

참조

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

Ref와 DOM – React