HTML에서 DOM 요소에 이름을 달 때는 id를 사용한다.

• 다음과 같이 요소에 id를 달면, CSS에서 특정 id에 특정 스타일을 적용하거나 자바스크립트에서 해당 id를 가진 요소를 찾아서 작업할 수 있다.

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

이렇게 HTML에서 id를 사용하여 DOM에 이름을 다는 것처럼, 리액트 프로젝트 내부에서 DOM에 이름을 다는 방법이 있다. 바로 ref(reference) 개념이다.

5-1. ref는 어떤 상황에서 사용해야 할까?

ref는 DOM을 꼭 직접적으로 건드려야 할 때 사용해야 한다.

5-1-1. 예제 컴포넌트 생성

클래스형 컴포넌트에서 ref를 사용하는 방법을 알아보자.