React_ Semantic 구조

시멘틱 태그에 대해서 알아두면 굉장히 좋다

사실 <div> 이거 하나만 알아도 실제로는 무방하다 보지만, 협업이나 여러사람들이 같이 하는 구조에서는 이러한 방법은 비효율적인 방법이다.

어떤 곳에서 어떻게 쓰이는지 시각적으로 직관적으로 해야 협업이 가능하므로 알아두면 굉장히 좋다

필수라고 해도 과언이 아니다

 

 

그렇다면 Semantic 이란 무엇인가 !!

 

React에서의 Semantic 구조란?

Semantic(시맨틱) 구조란, 의미론적으로 올바른 HTML 태그를 사용하여 웹 페이지를 구성하는 것을 말한다.

React에서 시맨틱 구조를 적용하면:

1. **SEO(검색 엔진 최적화, Search Engine Optimization)**에 도움이 되고
2. **웹 접근성(Accessibility, a11y)**이 향상되며
3. 코드 가독성이 좋아진다.

 

 

2. React에서 Semantic 구조 적용하기

React는 HTML을 JSX 문법으로 작성하므로, HTML의 시맨틱 태그를 그대로 사용할 수 있습니다.

✅ (1) 기본적인 시맨틱 구조

function App() {
  return (
    <div>
      <header>
        <h1>My Website</h1>
      </header>
      <nav>
        <ul>
          <li><a href="/">Home</a></li>
          <li><a href="/about">About</a></li>
        </ul>
      </nav>
      <main>
        <section>
          <h2>Welcome</h2>
          <p>This is the main content.</p>
        </section>
      </main>
      <footer>
        <p>&copy; 2025 My Website</p>
      </footer>
    </div>
  );
}
export default App;

 

 

📌 설명:

• <header>: 웹사이트의 헤더
• <nav>: 내비게이션 메뉴
• <main>: 주요 콘텐츠
• <section>: 특정 주제의 콘텐츠
• <footer>: 페이지 하단 정보

 

✅ (2) Article & Aside 적용하기

function BlogPost() {
  return (
    <article>
      <h2>React의 시맨틱 구조</h2>
      <p>React에서 시맨틱 태그를 사용하면 접근성이 향상됩니다.</p>
      <aside>
        <h3>관련 글</h3>
        <ul>
          <li><a href="/post1">React 기본 개념</a></li>
          <li><a href="/post2">JSX 문법</a></li>
        </ul>
      </aside>
    </article>
  );
}
export default BlogPost;

 

📌 설명:

• <article>: 독립적인 콘텐츠 블록
• <aside>: 관련 정보 (예: 사이드바, 추천 글 목록)

 

3. 시맨틱 구조 + React 컴포넌트화

React에서는 UI를 컴포넌트로 나누어 관리합니다.
아래처럼 Header, Nav, Main, Footer를 개별 컴포넌트로 만들 수도 있습니다.

// Header.js
export function Header() {
  return (
    <header>
      <h1>My Website</h1>
    </header>
  );
}

// Nav.js
export function Nav() {
  return (
    <nav>
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
      </ul>
    </nav>
  );
}

// Main.js
export function Main() {
  return (
    <main>
      <section>
        <h2>Welcome</h2>
        <p>This is the main content.</p>
      </section>
    </main>
  );
}

// Footer.js
export function Footer() {
  return (
    <footer>
      <p>&copy; 2025 My Website</p>
    </footer>
  );
}

// App.js (최종 컴포넌트)
import { Header } from "./Header";
import { Nav } from "./Nav";
import { Main } from "./Main";
import { Footer } from "./Footer";

function App() {
  return (
    <div>
      <Header />
      <Nav />
      <Main />
      <Footer />
    </div>
  );
}
export default App;

 

📌 장점:

• 컴포넌트화하여 재사용 가능
• 유지보수 및 관리 용이
• 시맨틱 태그를 활용하여 SEO & 접근성 향상

 

4. 시맨틱 구조 & SEO 최적화

시맨틱 태그는 **검색 엔진 최적화(SEO)**에 도움이 됩니다.
검색 엔진(Google, Bing 등)은 시맨틱 태그를 활용하여 페이지의 구조를 이해합니다.

SEO 최적화를 위한 추가 설정

✅ <meta> 태그 활용하기 (index.html)

 

<meta name="description" content="React로 제작된 웹사이트입니다.">
<meta name="keywords" content="React, Semantic HTML, 웹 개발">
<meta name="author" content="Your Name">

 

✅ <h1> ~ <h6> 태그를 올바르게 사용하기

 

<h1>웹사이트 제목</h1>  // 페이지의 최상위 제목
<h2>섹션 제목</h2>
<h3>세부 제목</h3>

 

✅ <img> 태그에는 alt 속성 추가하기

<img src="logo.png" alt="웹사이트 로고" />

 

📌 이유: alt 속성은 **스크린 리더(시각 장애인을 위한 도구)**와 검색 엔진에서 사용됩니다.

 

 

5. 결론

✅ React에서 시맨틱 태그를 사용하면?

• SEO(검색 엔진 최적화) 개선
• 웹 접근성(Accessibility) 향상
• 코드 가독성 및 유지보수 용이
• 검색 엔진이 페이지 구조를 더 잘 인식함

✅ 시맨틱 구조 적용 방법

1. 적절한 HTML 태그 사용 (<header>, <main>, <section> 등)
2. 컴포넌트화하여 재사용 가능하게 만들기
3. SEO 최적화를 위한 메타 태그 & 올바른 태그 구조 활용

🚀 즉, React에서도 올바른 시맨틱 태그를 사용하면 웹 페이지의 품질이 좋아집니다!

 

 

아래는 시멘틱 구조를 정리해 놓은 표이다 참고하자 !!

<header>	말 그대로 헤더 , 머리말
<nav>	말 그대로 네비, 목차 , 리스트 등
<aside>	말 그대로 어사이드, 우,좌의 사이드 공간
<section>	말 그대로 섹션 , 카테고리 등
<article>	말 그대로 기사, 내용 적기
<footer>	말 그대로 밑, 바닥글
<address>	주소 , 정보 등
<hgroup>	그룹 묶음, 제목 및 부제목을 한 그룹으로 묶음
<main>	말 그대로 메인
<details>	말 그대로 세부사항, 세부적인 내용
<figure>	이미지, 사진 등 콘텐츠
<figcaption>	위의 부가적인 정의
<mark>	강조
<time>	시간
<summary>	요약

 

 

시멘틱 구조 잘 이해해 두면 나중에 할때도 쉽게 적용시킬 수 있어 시간 단축에 큰 도움을 준다. !!