React에서 id 속성값으로 CSS를 쓰지 않는 이유

Q.

React에서는 어째서 CSS를 id 속성값으로 쓸 수 없는거야?

 

 

 

A.

React에서는 CSS를 id 속성값으로 사용하는 것이 문제라기보다는, CSS의 특성과 React의 특성이 충돌할 가능성 때문입니다. 아래에 그 이유를 단계적으로 설명해 볼게요.

---

1. CSS의 id 선택자 특성

id는 HTML 요소에 고유한 식별자를 지정하는 속성입니다. CSS에서는 id 선택자를 사용할 때 # 기호를 사용하여 해당 요소를 스타일링합니다. 

#myElement {
  color: blue;
}

하지만, 문제는 id가 다음과 같은 제약을 가질 때 발생합니다:

• 고유성: id는 HTML 문서 내에서 유일해야 합니다.
• 우선순위: id 선택자의 CSS 우선순위는 매우 높기 때문에 다른 스타일을 덮어쓸 가능성이 큽니다.

React에서는 컴포넌트 기반 아키텍처를 사용하므로, 여러 개의 동일한 컴포넌트를 재사용하는 경우가 많습니다. 이런 상황에서 id를 동일하게 설정하면 HTML 문서 내에서 중복된 id가 발생할 수 있습니다.

---

2. React의 특성과의 충돌

React는 컴포넌트를 재사용하고, 상태 변화에 따라 DOM을 동적으로 업데이트합니다. 이 특성과 id 속성이 충돌하는 이유는 다음과 같습니다:

a. 컴포넌트 재사용 시 중복 문제

React에서 여러 컴포넌트를 재사용하면, 동일한 id를 가진 DOM 요소들이 생성될 수 있습니다. 이는 HTML의 표준에 어긋날 뿐 아니라, 스타일링 및 JavaScript의 DOM 조작에 문제가 생길 수 있습니다.

function MyComponent() {
  return <div id="myElement">Hello</div>;
}

// 여러 번 렌더링하면 HTML 내에 동일한 id가 반복됨.
<MyComponent />
<MyComponent />

이 경우 HTML 내에서 다음과 같은 구조가 생성되며, 이는 잘못된 상태입니다:

<div id="myElement">Hello</div>
<div id="myElement">Hello</div>

---

b. 동적인 DOM 관리

React는 Virtual DOM을 사용하여 필요한 부분만 업데이트합니다. 이 과정에서 id는 React가 관리하는 고유성 또는 상태 추적을 방해할 수 있습니다. 예를 들어, 여러 요소를 조작해야 할 때 id를 기준으로 작업하면 충돌이 발생할 수 있습니다.

---

3. CSS 모듈 또는 클래스 기반 스타일링 권장

React에서 스타일을 적용하려면 id 대신 CSS 클래스나 CSS 모듈을 사용하는 것이 더 안전하고 권장됩니다. 이는 다음과 같은 이유에서입니다:

• 중복 가능: 클래스는 id처럼 고유할 필요가 없으므로 컴포넌트를 재사용할 때 문제가 되지 않습니다.
• 가독성 및 유지보수성: 클래스 이름을 규칙적으로 정의하면 코드 가독성이 높아집니다.
• CSS-in-JS 및 CSS 모듈 지원: React는 스타일링을 컴포넌트 수준에서 캡슐화할 수 있는 다양한 방법을 제공합니다.

---

4. 실제 권장 코드 예시

CSS 클래스 사용 예시:

/* styles.css */
.myElement {
  color: blue;
}

import './styles.css';

function MyComponent() {
  return <div className="myElement">Hello</div>;
}

CSS 모듈 사용 예시:

/* MyComponent.module.css */
.myElement {
  color: blue;
}

import styles from './MyComponent.module.css';

function MyComponent() {
  return <div className={styles.myElement}>Hello</div>;
}

---

5. 결론

React에서 id를 CSS 스타일링에 사용하는 것이 금지된 것은 아니지만, 컴포넌트 재사용과 HTML의 고유성 요구사항 때문에 문제가 발생할 가능성이 큽니다. 따라서 React에서는 클래스 기반의 스타일링이나 CSS 모듈을 활용하여 이러한 문제를 회피하는 것이 일반적입니다.

혹시 추가로 궁금한 점이 있으면 알려주세요! 😊