Ref와 DOM

Ref는 render 메서드에서 생성된 DOM 노드나 React 엘리먼트에 접근하는 방법을 제공 합니다.

리액트 프로젝트에서도 가끔씩 DOM을 직접 선택해야 하는 상황이 발생 할 수 있습니다.

• 특정 엘리먼트의 크기를 가져오는 경우
• 스크롤바 위치를 가져오거나 설정하는 경우
• 인풋박스에 포커스를 주는 경우
• 외부 라이브러리를 사용하는 경우

💡 **리액트 컴포넌트에서 id를 사용하면 안되는 이유** 리액트 컴포넌트 안에서도 id를 사용할 수는 있습니다. JSX안에서 DOM에 id를 달면 해당 DOM을 렌더링 할 때 그대로 전달 됩니다. 하지만 특수한 경우가 아니면 사용을 권장하지 않습니다. **하나의 컴포넌트를 여러 번 호출하는 경우 유일해야 할 id가 중복 id로 만들어지게 됩니다.**

useRef?

useRef는 React Hook 중 하나로, 함수형 컴포넌트에서도 DOM 노드나 클래스 컴포넌트에서의 인스턴스 변수를 사용할 수 있게 해줍니다.

useRef import하기

import React, { useRef } from 'react';

useRef() 함수 호출하기

const inputRef = useRef(null);

useRef를 사용하여 DOM 노드에 접근하기

<input disabled type="text" ref={inputRef} />

input 엘리먼트 제어

ref prop은 여러가지 HTML 엘리먼트 중에서도 을 제어 할 때 많이 사용됩니다.

• current 값은 우리가 원하는 DOM을 가리킵니다.
• 버튼을 누르면 해당 Input 박스가 활성화 됩니다.

import React, { useRef } from "react";

function CreateRef() {
    const inputRef = useRef(null);
  
    function handleFocus() {
      inputRef.current.disabled = false;
      inputRef.current.focus();
    }
  
    return (
      <>
        <input disabled type="text" ref={inputRef} />
        <button onClick={handleFocus}>활성화</button>
      </>
    );
  }
  export default CreateRef;

리액트에서 ref를 사용하는 경우

Ref는 DOM 요소를 직접 접근해야 하는 경우 사용 됩니다. 하지만 Ref는 최대한 사용을 줄이는 것이 좋습니다. Ref는 DOM에 직접 접근하기 때문에, 컴포넌트의 성능에 영향을 미칠 수 있기 때문입니다. 따라서 Ref를 사용할 때는 신중하게 고려해야 합니다.

포커스를 설정해야 하는 경우

• 입력 필드나 버튼 등 사용자 입력 요소에 포커스를 설정해야 할 때 Ref를 사용할 수 있습니다.

컴포넌트의 크기나 위치를 가져와야 하는 경우

• 컴포넌트의 크기나 위치를 가져와야 할 때 Ref를 사용할 수 있습니다.

컴포넌트 인스턴스에 직접 접근해야 하는 경우

• 컴포넌트 인스턴스에 직접 접근해야 하는 경우 Ref를 사용할 수 있습니다.

자식 컴포넌트에 접근해야 하는 경우

• 부모 컴포넌트에서 자식 컴포넌트에 접근해야 하는 경우 Ref를 사용할 수 있습니다.

애니메이션을 제어해야 하는 경우

• 애니메이션을 제어하거나, 특정 시점에서 애니메이션을 중지해야 할 때 Ref를 사용할 수 있습니다.