React - DOM Reference 를 잘 활용할 수 있는 useRef

1. useRef

 

1. 지금까지 React 를 공부해보며, React 만 가지고 거의 대부분의 프론트엔드 요구사항을 구현할 수 있었다.
2.  DOM 에 대한 지식이 필요 없다고 생각할지도 모른다. 하지만 React 로 모든 개발 요구 사항을 충족할 수는 없다.
3. 아래 DOM 엘리먼트 주소값을 활용해야 하는 경우 특히 그렇다.

 

## DOM 엘리먼트 주소값 ##

1. focus
2. text selection
3. media playback
4. 애니메이션 적용
5. d3.js, greensock 등 DOM 등 기반 라이브러리 활용

 

## useRef ##

• React 는 위와 같은 예외적인 상황에서 useRef 으로 DOM 노드, 엘리먼트, 그리고 리액트 컴포넌트 주소값을 참조할 수 있다.

const 주소값담는변수 = useRef(참조자료형)
// 이제 주소값담는변수에 어떤 주소값이든 담을 수 있습니다.

return (
    <div>
      <input ref={주소값담는변수} type="text" />
        {/* React에서 사용 가능한 ref라는 속성에 주소값담는변수를 값으로 할당하면*/}
        {/* 주소값담는변수에는 input DOM 엘리먼트의 주소가 담깁니다. */}
        {/* 향후 다른 컴포넌트에서 input DOM 엘리먼트를 활용할 수 있습니다. */}
    </div>
);

1. 이 주소값은 컴포넌트가 re-render 가 되더라도 바뀌지 않는다. 이 특성을 활용하여 아래의 제한된 상황에서 useRef 를 활용할 수 있다.
2. 제시된 상황을 제외한 대부분의 경우 기본 리액트 문법을 벗어나 useRef 를 남용하는 것은 부적절하고, React 의 특징이자 장점인 선언적 프로그래밍 원칙과 배치되기 때문에, 조심해서 사용해야 한다.