DOM 요소에 접근하기(Ref)

Ref란?

ref는 render에서 생성된 DOM이나 React element에 접근하는 방법을 제공해준다.

 

일반적으로 부모 컴포넌트가 자식 컴포넌트와 상호작용 가능한 것은 props가 유일하다.

자식 컴포넌트를 수정하려면 새로운 props를 전달하여 자식을 렌더링 해야하는데, 가끔 직접적으로 자식을 수정해야하는 경우도 발생한다.

이때 DOM element에 접근하기 위해 Ref를 사용한다.

HTML을 작성할 때 div같은 태그에 id를 달아 특정 id에 해당하는 DOM요소에만 스타일을 적용하거나,

해당 DOM요소에 접근해 여러 작업을 할 수있다.

<div id="react">
</div>

 

하지만 컴포넌트를 재사용한다면 그 id가 중복 될 수 있어, 컴포넌트 내부에서만 작동하는 Ref를 사용해야한다.

 

Ref를 사용해야 할 때는 다음과 같다.

• focus, 텍스트 선택영역, 미디어 재생관리
• 애니메이션을 직접 실행할 때
• 서드파티 DOM 라이브러리를 React와 같이 사용할 때 (light-weight 차트 라이브러리 등)
• 스크롤 박스 조작
• 등등

 

함수형 컴포넌트를 자주 사용하므로 함수형 컴포넌트에 ref다는 예시를 가져와 보았다.

함수형 컴포넌트에서는 useRef라는 훅을 사용하여 ref를 사용한다.

아래 예시는 dom-to-image라는 라이브러리(특정 DOM요소를 png로 바꿔 저장시켜줌)를 사용하기위해

원하는 요소에 ref를 부여한 것이다.

import { useRef } from 'react';
import domtoimage from 'dom-to-image'

...
const TestComponent = (props) => {

    const {id, nickName} = props;
    const personInfo = useRef();

    // 영역을 png로 저장하는 함수
    const onClick = function () {
        domtoimage.toPng(personInfo.current) // ref를 부여한 요소에 .current로 접근
        .then(function (blob) {
          window.saveAs(blob, 'user-card.png');
        })
    };

    return (
        <>
            <div className="box" ref={personInfo}> {/*div.box 요소에 ref 부여함*/}
                <p> {id} - {nickName} 테스트 영역 </p>
            </div>
            <button onClick={onClick}>저장</button>
        </>
    );
}

const personInfo = useRef()로 personInfo에 ref객체를 반환시킨다. 그리고 className='box'인 곳에 ref = {personInfo} 값을 부여한다.

이후에 personInfo.current를 사용하게 되면, 위에서 부여한 div요소에 접근 가능한 id처럼 사용가능하다.

 

이런 용도 외에도 useRef는 값이 변하여도 리렌더링 하지 않도록 하는 변수를 관리하는 용도로 사용할 수 있다.

 

 

 

 

 

 

 

 

 

 

---

[React] ref란? - DOM에 직접 접근하기(useRef)

 

[React] React에서 DOM 요소에 접근하기 위해 Ref를 쓰는 이유

 

Hooks API Reference – React

Ref와 DOM – React