리액트에서도 JSX내부에서 id는 사용이 가능하지만
리액트 프로젝트에서 DOM에 이름을 다는 방법이 따로 있습니다
그것은 바로 ref(reference)개념입니다.
- ref(reference)를 사용해야하는 이유?
일반적인 HTML에서 DOM요소에 이름을 붙일 때는 id를 사용합니다.
<div id="my-element"></div>특정 DOM요소에 어떤 작업을 해야할 때
이렇게 요소에 id를 달면 CSS에서 특정 id에 특정스타일을 적용하거나
자바스크립트에서 해당 id를 가진 요소를 찾아서 작업할 수 있습니다.
※ 어째서 id가 아닌 ref를 사용해야 하나요?
리액트 컴포넌트 안에서도 id를 사용할 수 있지만, 사용을 권장하지 않습니다.
예를 들어, 같은 컴포넌트를 여러번 반복해서 사용한다고 가정해봅시다.
모든 id는 unique(유일)해야 하는데
이런 상황에서는 중복 id를 가진 DOM이 여러개 생기므로 잘못된 사용입니다.
ref는 전역적으로 작동하지 않고
컴포넌트 내부에서만 작동하기 때문에 이런 문제가 생기지 않습니다.
대부분은 id를 사용하지 않고도 원하는 기능을 구현할 수 있지만
다른 라이브러리나 프레임워크를 사용하기 위해 id를 사용해야하는 상황이 온다면 id의 중복이 발생하지 않도록 주의해야 합니다.
1234