[React] ref란?

<div id = "my-element"> </div>

특정 DOM 요소에 작업을 해야 할 경우 요소에 id를 달면 CSS에서 특정 id에 특정 스타일을

적용하거나 자바스크립트에서 해당 id를 가진 요소를 찾아서 작업할 수 있다.

 

이렇게 HTML에서 id를 사용하여 특정 DOM에 이름을 다는 것처럼 리액트 프로젝트 내부에서

DOM에 이름을 다는 방법도 있다. 이것이 바로 ref(reference의 줄임말)이다.

 

물론 리액트 컴포넌트 안에서 id를 사용할 수 있다. JSX안에 id를 달면 되기 때문이다.

 

하지만 여러 컴포넌트를 사용할 때 id를 사용하게 되면 HTML의 id는 유일(unique) 해야 하는데,

중복된 id를 사용하는 컴포넌트가 여러 개 생길 우려가 있다.

 

ref는 전역적으로 작동하지 않고 컴포넌트 내부에서만 작동하기 때문에 이러한 문제에 걱정이 없다.

• ref는 어떤 상황에 사용해야 할까?
  • DOM을 직접 건드려야 할 때 사용한다.
    → 특정 input에 포커스 주기, 스크롤 박스 조작하기, Canvas 요소에 그림 그리기