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

Q.리액트에서는 DOM 요소에 접근하기 위해 주로 ref를 씁니다.
domcument.getElementsByClassName 등을 쓰는 게 아니라 ref를 쓰는 이유는 무엇일까요?

1. ref란?

일반 HTML에서 DOM요소에 이름을 달 때는 id를 사용한다.
리액트 프로젝트 내부에서 DOM에 이름을 다는 방법이 ref 이다.

2. ref를 사용하는 이유?

id는 유일해야 하지만 컴포넌트 재사용을 한다면 중복될 가능성이 있다.
ref는 전역적으로 작동하지 않고 컴포넌트 내부에서만 작동한다.

ref는 언제 쓰는가?

DOM element에 접근하기
가장 많이 쓰이는 예시.
ref를 활용하면 전체 컴포넌트를 렌더링 시키지 않고, dom에만 접근하여 내가 원하는 효과를 주는게 가능해 집니다.
즉, dom element에 접근하여 원하는 작업을 하였지만 컴포넌트 전체에 영향을 끼치지 않고, 원하는 작업을 할 수 있게 됩니다.
그래서 주로 focus나 텍스트를 선택할 때 주로 많이 사용하게 됩니다.

reference) https://ko.reactjs.org/docs/refs-and-the-dom.html
https://blog.toycrane.xyz/react-ref%EC%97%90-%EB%8C%80%ED%95%B4-%EC%9E%90%EC%84%B8%ED%9E%88-%EC%95%8C%EC%95%84%EB%B3%B4%EC%9E%90-f7d18d140716