[React] React Hooks - useRef

suno·2022년 12월 7일

일반적으로 React에서는 부모 컴포넌트 → 자식 컴포너트로 props를 전달해서 자식을 렌더링하는데, 직접적으로 DOM을 조작해야 하는 경우가 있다.

이럴 때 Reack Hook useRef를 사용할 수 있다.

바닐라 JavaScript에서는 DOM 요소를 선택하기 위해 querySelector와 같은 DOM API를 사용해 왔다.
하지만, React에서는 DOM API 사용을 지양해야 한다.

React는 Virtual DOM을 사용한다.

실제 DOM Tree에 반영되기 전에 Virtual DOM을 생성해서, 이전의 DOM과 비교하고(리액트 팀의 비교 알고리즘을 사용) 변경된 부분만 실제 DOM Tree에 업데이트 한다!

그러나 DOM API는 실제 DOM Tree에 있는 DOM 요소를 가져오게 된다. 따라서 DOM 요소가 현재 변경 되었는지, 믿을만한지 판단하기가 어렵다. React가 DOM 요소를 신뢰할 수 없어 디버깅이 어려워지는 단점도 있다.

또한 React의 가장 중요한 개념이 State이다. React 상의 모든 데이터는 컴포넌트의 state로 제어해야 한다.

선언적으로 해결될 수 있는 문제에서는 state와 props를 활용한다. (state를 상위 계층으로 끌어올리는 것을 고려)
직접 조작해야 하는 경우에는 useRef Hook을 사용한다.
- 포커스, 텍스트 선택영역, 미디어 재생을 관리할 때
- 애니메이션을 직접 실행시킬 때
- 서드파티 DOM 라이브러리를 사용할 때

import React, { useRef } from 'react';

function MyComponent() {
  const myRef = useRef(null);
  return <div ref={myRef}></div>;
}

useRef 메서드를 사용해서 myRef 객체를 만들고, 원하는 DOM 요소의 ref 속성 값으로 전달한다.
그러면 myRef 객체의 current 값은 해당 DOM을 가리킨다.

myRef.current에 접근하면 DOM 요소를 조작할 수 있게 된다!

React Docs - Ref와 DOM
React에서의 querySelector, 잘 쓰고 있는 걸까?(feat. Ref)

Software Engineer 🍊