[React] 컴포넌트의 시멘틱 태그 적용

React를 사용한 팀 프로젝트를 진행중이다. 컴포넌트에는 시멘틱 태그를 어떻게 적용해야 하는지 기준을 모르겠어서 프로젝트 적용을 위해 관련 내용을 정리해보려고 한다.

아래의 내용은 현재 진행중인 프로젝트 기준으로 작성한 것으로 상황에 맞춰 사용해야 할 것으로 보인다.

태그 적용 기준

1. 페이지 구조 고려

Header 영역 컴포넌트 : <header> 태그를 최상단 부모 요소로 사용
page 영역 컴포넌트 : <main> 태그를 최상단 부모 요소로 사용
Footer 영역 컴포넌트 : <footer> 태그를 최상단 부모 요소로 사용

2. 컴포넌트의 역할 정의

컴포넌트가 페이지의 주요 콘텐츠인지, 보조적인 내용인지 구분

1. 주요 콘텐츠
	<section> : 회원 정보, 주문내역 등 페이지의 영역 (문서의 독립적인 섹션)
    <article> : 상품 카드 컴포넌트 등 독립적으로 배포 가능하거나 완전한 콘텐츠

2. 보조적인 내용
	<aside> : 사이드바, 추천 상품 컴포넌트 등 본문과 간접적으로 관련된 보조 콘텐츠

제목 태그는?

① 전체 문서 구조에 따라 계층적으로 사용

  1. 페이지 최상위 제목은 <h1> : 페이지 컴포넌트에서의 제목 (고유한 제목이어야 함)
  2. 각 섹션의 제목은 <h2> : 주요 콘텐츠에서의 제목
  3. 섹션 안에서 더 작은 제목은 <h3>~<h4> : 보조적인 콘텐츠에서의 제목

② 페이지 전체에서 제목 계층이 중복되지 않도록 해야한다.

case1. 섹션에서 <h2>와 <h3>를 다 쓰고, 섹션 하위 컴포넌트에서 또 <h3>를 쓰는 경우
case2. 페이지에서 <h1>을 쓰고, 섹션에서 <h2>를 생략한 채 섹션 하위 컴포넌트에서 <h3>를 쓰는 경우

③ 하위 컴포넌트가 단순히 설명적인 콘텐츠라면 제목 태그 없이 <p>나 다른 태그를 사용

제목의 계층은 논리적인 구조를 따라가야 하며, 시각적인 스타일링 때문에 제목 태그를 선택하지 않도록 주의해야 한다.

예시

function Header() {
  return (
    <header>
      <nav>
        <ul>
          <li><a href="/home">Home</a></li>
          <li><a href="/profile">Profile</a></li>
        </ul>
      </nav>
    </header>
  );
}

---

function MyPage() {
  return (
    <main>
      <section>
        <h2>회원 정보</h2>
        {/* 회원 정보 컴포넌트 */}
      </section>
      <section>
        <h2>주문 내역</h2>
        {/* 주문 내역 컴포넌트 */}
      </section>
    </main>
  );
}

---

function Footer() {
  return (
    <footer>
      <p>&copy; 2024 My E-commerce</p>
      <nav>
        <ul>
          <li><a href="/terms">이용약관</a></li>
          <li><a href="/privacy">개인정보처리방침</a></li>
        </ul>
      </nav>
    </footer>
  );
}