Ref를 알아보자

Ref ?

JS에서는 특정 DOM을 getElementById, querySelector 등으로 선택해서 화면에 변화를 주지만 React에서는 기본적으로 가상 돔을 통해 변화가 일어난 컴포넌트를 리렌더링 하는 방식으로 화면에 변화를 준다

하지만 JS에서 특정 DOM을 선택해 작업하듯 React에서도 그런 상황이 필요한 경우가 있는데, 특정 DOM 요소의 위치를 계속가져와야한다던지, 스크롤의 위치를 가져와야한다던지 하는 경우가 그렇다

그런 경우 state에 담아 DOM을 조작하면 리렌더링이 너무 많이 일어나서 좋지 않다.
때문에 Ref라는 것을 사용하여 특정 DOM의 상태를 변경해주는 것이 좋다
Ref는 Reference의 줄임말이며 앞서 말한대로 특정 DOM을 담아 놓고 사용하는데 쓰이며 때때로 state로 주고 싶지 않은 변수를 저장하는데 쓰이기도 한다

사용

함수형 컴포넌트에서는 useRef()를 통해 사용하며 클래스형 컴포넌트에서는 React.createRef() 를 통해 생성하고 사용한다

클래스형 컴포넌트 Ref 사용 예

필자는 캐러셀을 만들다가 드래그 이벤트를 구현하는 과정에서 Ref를 사용하게 되었는데, 무브이벤트마다 해당 DOM의 transform을 변경하는 것을 어떻게 할 지 고민하다가 사용하게 되었다

>> github repo

위 파일에서 ref imageContainer를 핸들링 하고 있다

// constructor
this.imgDomRef = React.createRef();

// render
 <div
  className={`imageContainer`}
  ref={this.imgDomRef}
  style={{
    width: `${maxPos}px`,
  }}
>