[ React ] DOM과 ref

 💡 리액트에서는 DOM 요소에 접근하기 위해 주로 ref를 씁니다. domcument.getElementsByClassName 등을 쓰는 게 아니라 ref를 쓰는 이유는 무엇일까요?

 

• ref는 ‘reference’의 약자로 참조라는 뜻이다.

HTML에서 dom요소에 이름을 달 때 id를 사용하듯이 리엑트에서 dom요소에 이름을 달 때 ref를 쓴다.

 

 

• DOM 이란 Document Object Model 의 약자로 직역하면 문서 객체 모델

웹 페이지를 이루는 요소들(ex. 태그)을 자바스크립트가 이용을 할 수 있게 브라우저 내에서 트리 구조로 만든 객체 모델이다.

즉, DOM은 HTML과 Javascript를 서로 이어주는 역할을 한다.

일반적인 DOM은 수정될 때마다 렌더링이 실시간으로 일어난다. 가상DOM은 변경사항을 가상 DOM에 수정되고 그 후 가상돔을 이용해 돔을 변경사항만 한번 수정하여 렌더링을 한번만 하게한다. 즉 불필요한 렌더링을 줄일 수 있다.

리액트에서는 가상돔을 사용한다.

 

그러나 재사용성이라는 React의 환상적인 효율은 이 작동에 실제로 문제를 발생시킵니다.

요컨데 id라 함은 class와 달리 DOM의 개별 노드에 고유성을 부여해주기 위해 사용됩니다. 따라서 같은 id는 두 개 이상 존재하지 않습니다. 그런데 이 컴포넌트에 속한 DOM 노드에 id가 부여되면 컴포넌트가 재사용 될 때마다 해당 id를 가진 DOM 노드가 복제되고 이 때 id는 그 고유성을 잃게 됩니다.

 

따라서 이 때 useRef를 사용하여 반환된 ref 객체를 요소에 할당하면 해당 컴포넌트의 생애주기 동안 ref가 정의된 컴포넌트의 context 안에서 유일성을 보장하는 역할을 수행하게 되고, 이 때 반환된 객체의 .current 프로퍼티를 통해 DOM의 직접 조작이 가능해집니다.

 

직접 돔을 건드리는 일은 지양해야하지만 React에서 state로만 해결할 수 없고, DOM을 반드시 직접 건드려야 할 때 ref를 사용한다

• Ref의 바람직한 사용 사례
  • 포커스, 텍스트 선택 영역, 혹은 미디어의 재생을 관리할 때.
  • 애니메이션을 직접적으로 실행시킬 때.
  • 서드 파티 DOM 라이브러리를 React와 같이 사용할 때.

 

 

 

* 참조

Ref란

Ref와 DOM

Element.getElementsByClassName()

DOM과 가상DOM

useRef와 DOM