React Ref 개념과 사용하는 방법

목차

1. Ref란 무엇인가
2. Ref 사용 시에 주의해야 하는 점
3. Ref는 언제 사용해야 할까
4. Ref 사용하는 방법

---

1.  Ref란 무엇인가

Ref를 한 줄로 간단하게 설명하면 아래와 같이 이야기 할 수 있다.

Ref는 render 메서드에서 생성된 DOM 노드나 React 엘리먼트에 직접 접근하는 방법

 

일반적은 React 데이터 플로우에서 데이터는 부모에서 자식으로만 전달 될 수 있다.

하지만 가끔 이러한 데이터 플로우에서 벗어나야 하는 경우가 있을 수 있다.

이럴 때 Ref를 사용하여 직접 DOM 앨리먼트나 컴포넌트의 인스턴스에 접근할 수 있다.

 

DOM 노드나 엘리먼트에 직접 접근하려면 id를 사용하면 되지 않나? 생각할 수도 있다.

우리가 흔히 아는 document.getElementById($아이디 이름) 을 사용해서 말이다.

하지만 id를 사용하는 방법은 적절하지 않다.

왜냐하면 기본적으로 컴포넌트는 '재사용'에 목적을 두고 있는데 id는 '유일'해야 하기 때문이다.

 

예를 들어 <App> 부모 컴포넌트에서 <MyComponent>라는 자식 컴포넌트 3개를 렌더링 하는 경우를 생각해보자.

이 경우에 같은 id를 가진 3개의 컴포넌트가 중복적으로 DOM트리에 생성되게 된다.

하지만 ref를 사용하면 이러한 문제가 생기지 않는다.

 

 

2.  Ref 사용 시에 주의해야 하는 점

DOM에 접근할 수 있다고 해서 쉽게 돔을 조작하고 값을 바꾸려고 해서는 안된다.

직접 DOM에 접근하는 것은 굉장히 예외적인 상황이기 때문에

되도록이면 porps로 전달하거나 콜백 함수를 사용하는 등

React의 기본 데이터 흐름을 존중하고 지켜야 한다.

 

 

3.  Ref는 언제 사용할까

Ref는 신중히 사용해야 하는 개념이지만 꼭 Ref가 필요한 상황이 분명 존재한다.

Ref는 언제 사용해야 할까?

1. 포커스, 텍스트 선택영역, 미디어 재생 관리를 하는 경우

'Ref'를 사용하여 input 태그에 포커스를 설정한다거나, textarea 태그에 선택 영역을 조작 하거나,

미디어 재생 등을 직접적으로 제어하는 등의 경우에 Ref를 사용하여 조작할 수 있다.

2. 애니메이션을 직접 실행하는 경우

외부 애니메이션 라이브러리와 React를 통합하거나,

React 컴포넌트의 생명주기 메서드 및 상태를 사용하여 애니메이션을 직접적으로 제어할 수 있다.

3. 서드 파티 DOM 라이브러리와 통합하는 경우

React에서 외부의 서드 파티 DOM 라이브러리를 사용할 때,

'Ref'를 통해 해당 라이브러리의 DOM 요소에 접근하고 통합할 수 있다.

이는 React가 가상 DOM을 사용하는 동안 외부 라이브러리와의 통합을 용이하게 해준다.

 

참고로 State와 다르게 Ref는 참조 값이 변한다고 해서 컴포넌트들의 재실행을 야기하지 않는다.

따라서 UI와 직접적인 영향이 있는 경우 (값이 화면에 보여져야 하는 경우)는 Ref를 사용하기보다

State를 사용하는 것을 권장한다.

반대로 UI에 직접적인 영향을 주지 않으면서 컴포넌트가 재실행될 때 초기화되지 않는 경우에는 Ref를 사용한다.

 

3.  Ref 사용하는 방법

input 태그에서 사용하는 Ref의 예시를 직접 구현해 봄으로써,

Ref를 사용하는 방법을 설명하려고 한다.

 

다음은 컴포넌트가 마운트 될 때 자동으로 input에 focus가 가도록 만드는 코드이다.

import {useRef, useEffect} from 'react';

function App() {

  const inputRef = useRef(null);

  useEffect(() => {
    inputRef.current.focus();
    console.log(inputRef.current);
  }, []);

  return (
    <>
      <input 
        type="text"
        ref={inputRef} />
      <button>Focus</button>
    </>
  );
}

export default App;

해당 코드를 돌려보면 컴포넌트가 마운트 되자마자 input 안에 커서가 깜박이는 것을 볼 수 있다.

아래 영상은

새로고침을 눌렀을 때의 실행 화면이다.

ref사용한 input 실행 화면 녹화

<참고 자료>

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

https://developer-jeongyeon.tistory.com/60

React ref 쓰는 방법과 개념 알기