ref 가 뭐길래 DND에 꼭 필요할까?

봄·2025년 5월 20일

💙 React 파보기

목록 보기

3/4

ref란?

ref는 React가 HTML 요소(실제 DOM)를 직접 찾을 수 있게 해주는 도구다.

🧭 정리

구분	설명
평소 코드	JSX → 가상 DOM → 실제 DOM으로 자동 반영됨
ref 사용 시	React가 아닌 개발자가 직접 실제 DOM을 조작함
언제 ref를 씀?	드래그, 포커스, 스크롤, 사이즈 측정 등 가상 DOM으론 할 수 없는 작업을 할 때 사용

⭐️ ref는 왜 필요한가?

평소엔 React가 가상 DOM을 관리하지만,

정말 필요한 경우, 내가 직접 진짜 DOM을 만질 수 있게 해주는 “예외 통로”가 바로 ref다.

💡 실제 코드 예시

import { useRef, useEffect } from 'react';

function MyComponent() {
  const myBoxRef = useRef(null);

  useEffect(() => {
    console.log(myBoxRef.current); // 실제 DOM 요소가 출력됨
    myBoxRef.current.style.backgroundColor = 'lightblue';
  }, []);

  return (
    <div ref={myBoxRef}>
      Hello
    </div>
  );
}

✅ 위 코드에서 벌어지는 일

myBoxRef는 div를 가리키는 ref 객체
myBoxRef.current는 실제 HTML <div> 요소
여기에 직접 스타일을 주거나 포커스를 줄 수 있음

🧠 ref를 쓰는 대표적인 상황

상황	설명
드래그 앤 드롭	요소의 위치와 크기를 직접 측정해야 할 때
포커스 이동	input 창에 자동으로 포커스 줄 때
스크롤 조작	특정 위치로 스크롤 시킬 때
애니메이션 적용	DOM에 직접 스타일 조작할 때

🧲 Drag and Drop에서 왜 꼭 ref가 필요할까?

드래그 앤 드롭은 요소의 위치를 직접 추적해야 해.

예: "지금 이 박스 위에 마우스를 놓고 있어?"
이걸 알려면 실제 DOM의 위치 정보를 가져와야 해

const rect = element.getBoundingClientRect();

이 함수는 실제 HTML 요소의 화면 위치(px 단위)를 알려줌 → 가상 DOM으로는 절대 불가능

그래서 드래그 라이브러리들은 <li>, <ul> 같은 DOM 요소를 ref로 직접 가리켜서,

브라우저에게 위치 정보를 묻고 → 거기에 드롭해도 되는지 판단함.

❗️그렇다면 가상 DOM만 쓰면 어떤 문제가 생길까?

문제	설명
드롭 위치 계산 불가	마우스가 어디에 있는지 알 수 없어
충돌 감지 불가	두 요소가 겹쳤는지 모름
화면 변화 감지 불가	스크롤, 창 크기 변화 등 반응할 수 없음

✅ 결론

가상 DOM은 구조(설계도)만 알고,

위치, 크기, 충돌 같은 화면 위의 정보는 모른다.

그래서 드래그 앤 드롭처럼 화면에서 정확한 위치를 계산해야 하는 기능은

반드시 실제 DOM을 ref로 직접 조작해야 한다.

📦 핵심 요약

용어	설명
`ref`	실제 DOM을 React에서 가리키는 포인터
`ref.current`	진짜 HTML 요소를 가리킴
`useRef()`	ref를 만드는 Hook
드래그에서 역할	요소 위치를 계산하려면 반드시 필요함