[React/기술면접] ref란?

 ref란? 

* 기술면접 질문은 맨 아래에 적혀 있습니다

 

 

일반적으로 DOM 요소에 이름을 달 때 id를 사용한다.

리액트의 public/index.html 파일에서도 div 요소의 id로 root를 설정해 리액트 컴포넌트를 렌더링 시켜준다.

// public/index.html
<div id="root"></div>

// src/index.js
const root = ReactDOM.createRoot(document.getElementById('root'));

 

그러나 리액트 컴포넌트 안에서 특수한 경우가 아니라면 id의 사용을 권하지 않는다.

그 이유는 HTML에서 id는 유일해야 하는데, 컴포넌트를 재사용할 때마다 중복 id를 가진 DOM이 여러 개가 생겨나기 때문이다.

따라서 리액트에서 DOM에 이름을 달기 위해  ref(reference) 를 사용한다. ref는 전역적으로 작동하지 않고, 오직 컴포넌트 내부에서만 작동하기 때문에 이러한 문제점을 해결할 수 있다.

 

ref가 어떻게 구성되어 있는지 콘솔을 찍어보면 다음과 같다.

ref는 current 프로퍼티를 가진 객체이다. 뒤에서 살펴보겠지만, ref는 current를 사용해 DOM 요소에 접근할 수 있다.

 

 

 

728x90

 

---

 1. ref를 사용해야 하는 상황 

그렇다면 언제 ref를 사용해야 할까? 바로 'DOM을 직접적으로 건드려야 할 때' 이다.

아래와 같은 경우에는 DOM에 직접적으로 접근해야 합니다

 

• 특정 input에 focus 주기, 텍스트 선택 영역 혹은 미디어의 재생을 관리할 때
  
  
• 애니메이션을 직접적으로 실행시킬 때
  
  
• Canvas 요소에 그림 그리기

위와 같은 경우들은 비제어 컴포넌트를 제어하는 경우이다.

 

즉, React 시스템 내에서 제어하지 않고, 순수 JS를 이용해 컴포넌트를 제어한다는 것이다.

이것이 일반적인 경우와 어떻게 다른지 살펴보고 가자.

 

1-1. 제어 컴포넌트

import React, { Component } from "react";

class Example1 extends Component {
  constructor(props) {
    super(props);

    this.state = {
      value: ""
    };
  }

  render() {
    return (
      <input
        value={this.state.value}
        onChange={({ target: { value } }) =>
          this.setState({ ...this.state, value })
        }
      />
    );
  }
}

export default Example1;

위 코드는 React의 상태로 제어하는 컴포넌트다.

state로 input의 value를 관리하기 때문에 입력창에 값을 입력할 때마다 state가 변하게 되고, React에서 state가 변한다는 것은 그때마다 UI를 리렌더링 해줘야 한다는 것을 의미한다. 즉, React의 내에서 input의 value를 제어하게 되면 리렌더링이 반복적으로 일어나 성능을 떨어트릴 수 있다.

 

---

1-2. 비제어 컴포넌트

import React, { Component } from "react";

class Example2 extends Component { {
  constructor(props) {
    super(props);

    this.ref = React.createRef();
  }

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

export default Example2;

그렇다면 React가 해당 input 요소를 관리하지 않으면 문제는 해결된다.

뒤에서 자세히 살펴볼 것이기에 간단하게 설명하자면, ref는 input 요소만 가리키고 있기에 입력창에 아무리 값을 입력해도 state는 변경되지 않으므로 리렌더링이 발생하지 않는다.

 

 

---

 2. ref 사용 방법 

그럼 이제 ref의 사용법에 대해 자세히 살펴보자. ref를 사용하는 방법에는 2가지가 있다.

2-1. 콜백 함수를 통한 ref 설정

첫 번째 방법은 콜백 함수를 사용하는 것이다. 원하는 요소에 ref라는 콜백 함수를 props로 전달해주면 된다.

아래 코드처럼 input의 props로 ref 콜백함수를 전달해주면, this.inputTag는 input 요소의 DOM을 가리키게 된다. 여기서 ref의 이름인 setInput는 자유롭게 지어주면 된다.

import React, { Component } from "react";

class callbackRef extends Component {
	inputTag = null;
    
    setInput = (ref) => {
    	this.inputTag = ref;
    };

    render() {
        return (
            <div>
            	// this.ref이름
                <input ref={this.setInput} />
            </div>
        )
    }
}

export default callbackRef;

 

---

2-2. createRef를 통한 ref 설정

두 번째 방법은 React에 내장되어 있는 createRef 함수를 사용하는 것이다. 이 기능은 React 16.3 버전부터 사용이 가능하다.

이를 사용하기 위해선 먼저 변수에 React.createRef()를 할당해줘야 한다. 그리고 해당 변수를 props로 넣어주면 된다.

 

만약 DOM에 접근하려면 this.ref이름.current를 사용하면 된다. 콜백 함수 때와 달리 끝에 current 프로퍼티를 붙여 사용해줘야 한다.

import React, { Component } from "react";

class createRef extends Component {
    setInput = React.createRef();

    handleFocus = () => {
        this.setInput.current.focus();
    }

    render() {
        return (
            <div>
                <input ref={this.setInput} />
            </div>
        )
    }
}

export default createRef;

 

 

---

 3. 컴포넌트에 ref 달기 

리액트에서는 컴포넌트에도 ref를 달 수 있다. 이 방법은 컴포넌트 내부의 DOM 요소를 컴포넌트 외부에서 사용해야 할 때 활용한다.

ref를 다는 방법은 동일하다.

 

이렇게 할 경우, 컴포넌트 외부에서 컴포넌트 내부의 메서드나 변수에 접근이 가능하다.

 

• 예시 : myComponent.handleClick, myComponent.input

<MyComponent
    ref={(ref) => { this.myComponent = ref; }}
/>

 

반응형

 

---

🌟 React 기술면접 질문

1. ref는 무엇이고, 언제 사용해야 하나요?

 

  ref는 reference의 줄임말로, DOM 요소에 직접 접근해야 할 때 주로 사용되며, 비제어 컴포넌트를 제어하는 경우가 여기에 해당한다.

예를 들어, 입력창의 값을 state로 관리하게 되면 값이 바뀔 때마다 state가 바뀌고, 이로 인해 불필요한 리렌더링이 반복적으로 발생하게 된다. 이러한 문제점을 해결하기 위해 입력창에 ref를 달아주면 입력창의 값을 state로 관리하지 않더라도 외부에서 입력창의 값에 접근할 수 있게 된다.

 

 

2. React 컴포넌트 내에서 id가 아니라 ref를 사용하는 이유는 무엇인가요?

 

  HTML에서 id는 유일해야 하는데, 컴포넌트를 재사용할 때마다 중복 id를 가진 DOM이 여러 개가 생겨나기 때문에 이를 방지하고자 ref를 사용한다. ref는 전역적으로 작동하지 않고 오직 컴포넌트 내부에서만 작동하기 때문에 이러한 문제점을 해결해 줄 수 있다.

 

 

---

</> 끊임없이 성장하기 위해 공부한 내용을 글로 작성하고 있습니다. 틀린 부분이나 추가해야 할 부분이 있다면 언제든 댓글로 남겨주세요❗️

 

---

References

 

• 도서 <리액트를 다루는 기술>
• https://ko.legacy.reactjs.org/docs/refs-and-the-dom.html
• https://tecoble.techcourse.co.kr/post/2021-05-15-react-ref/