id, class 선택자에 대한 질문

[홍승진]

안녕하세요 선생님 부끄럽지만 기초적인 질문 하나 드리겠습니다.
자바스크립트를 배우고 여러 기능들을 구현해보다가 한 가지 의문이 생겼습니다.
id, class. 두 가지 선택자 중에 어떤 걸 사용해야하는 지에 대한 의문이요.
CSS 스타일링에서만 보자면 id는 재사용할 수 없고 우선순위가 높아 유지보수와 확장성이 떨어지기 때문에
지양하는 것이 좋고 id는 개발자에게 양보하는 것?이라는 말을 주워 들어서 알고 있습니다 . 

그런데 막상 제가 자바스크립트로 기능을 구현할 때도 id가 굳이 필요한가? 싶더라구요.
당연한 얘기지만 class로도 단일한 고유 요소를 선택하는 데에 문제가 없는데다가
id를 사용하면 선택자를 불러올 때 혼동만 생기는 것이 아닌가 해서요.

무지한 제가 아는 id가 꼭 필요한 상황은 마크업 단계에서
1. a태그의 herf=""로 다른 요소와 연결하려면 class는 안되고 id만 된다는 것.
2. input과 label을 연결할 때 id와 for로 연결된다는 것.

이렇게 두 가지인데요. 위처럼 id가 꼭 필요한 다른 상황이 또 있을까요?
아니면 제가 모르는 id를 사용해야하는 이유가 특별히 있을까요?

[이성수]

저도 자세히 아는건 아니지만 답변을 드리자면 실무 협업 문제로 알고 있습니다. 
말씀하신 것처럼 class는 디자인 영역에서, id는 개발자들에게 양보한다 라는 의미와 동일한 문제인데, 

프론트엔드 영역에서는 웹디자인 => 퍼블리싱 => 프론트엔드 개발 // 웹디자인 => 프론트엔드 개발 방식으로 협업이 진행되는걸로 알고 있습니다. 

여기서 작업 방향은 일방향으로만 이루어지는게 아니라 계속 왔다갔다 하는 경우가 잦을테니 디자인 영역에서 class 계속 수정하는 경우도 생길 수도 있습니다. 

그렇게 된다면 퍼블리셔 혹은 프론트엔드 개발 영역에서 클래스 기반으로 작업을 진행해둔 경우 태그를 잡지 못해 작업해둔 영역이 먹통이 되는 경우가 허다하게 생길겁니다. 

따라서 가능하면 id 영역은 디자인 및 퍼블리셔 영역에서 건들지 말고 개발자에게 양보하는 것으로 알고 있습니다. 

마지막에 말씀하시는 것처럼 class와 id의 기능상 구분도 존재하기는 하겠지만, 사실상 기능상의 구분은 무의미하며, 실제 업무 영역에서의 분업 문제로 이러한 개발 방식을 채택하였다고 생각하시면 될 듯합니다. 

혹시라도 잘못된 부분이 있다면 대댓 부탁드리겠습니다

[홍승진]

답변 감사합니다!!
그런데 제가 이해가 부족해서 하나만 더 여쭤보자면
'퍼블리셔 혹은 프론트엔드 개발 영역에서 클래스 기반으로 작업을 진행해둔 경우 태그를 잡지 못해'
라고 하셨는데 태그를 잡지 못한다는 것이 어떤 상황인지 알 수 있을까요?
class로 javascript 기능 구현을 해놓으면 그게 다시 스타일 작업으로 돌아왔을때 건들기가 어렵다는 뜻일까요?

[이성수]

별다른 의미가 있는게 아니라 querySelector로 잡을때라던가 id가 아니라 class로 html 태그 잡는거 말씀드린거에요

[홍승진]

자꾸 질문드려 죄송합니다.. class로 html 태그 잡지 못하는 상황이 어떤 상황인지 알 수 있을까요?

[이성수]

dom 사용할때
<-- HTML -->
<button type="button" class="myclass">하이용</div>

// JS
document.querySelector('.myClass').addEventListener('click', e => { // 
  // 코드
}) 

이런식으로 클래스명이 myclass인 태그를 찾아서 걔를 클릭하면 코드 실행해주셈 이라는 코드가 짜여져 있는 경우에

디자이너 쪽에서

<button type="button" class="yourclass">하이용</div>

이런식으로 클래스 이름을 바꿔버린다던가 그 클래스를 빼버리고 다른 클래스를 삽입하던가 하면

JS 쪽에서는 myclass인 태그를 못찾을거니깐 그 태그를 찾아서 실행하려고 짜놓은 코드들이 전부 먹통이 된다는 말이에요

어려운말 한게 아닌데 제가 설명을 제멋대로 했나보네유 ㅈㅅㅈㅅ

[codingapple]

페이지에서 1번만 사용할 수 있다는거 말고는 id의 용도는 더 생각이 안나는군요

[홍승진]

이해했습니다! 답변 정말 감사합니다 ^^

[글쓴이]

글