리액트에서 HTML5 시멘틱 태그 적용

January·2023년 3월 29일

Frontend

목록 보기

28/31

프로젝트를 진행하면서 많은 사람들이 서비스를 이용해봤으면 하는 마음이 있었다. 그러기 위해서 검색에서 상위로 사이트가 떠야했기에 SEO 최적화를 알아봤고 리액트는 <div id="root">...</div>로 항상 감싸져 있고 각 jsx마다 <div>..</div>로 시작하는 것에 대해 어떻게 시맨틱 웹 관점에서 접근하는지 궁금하여 알아봤다.

시멘틱 태그의 장점

SEO 최적화에 유리. (SEO: Search Engine Optimization)
- 검색 엔진이 태그의 목적에 부합하게 설계되어있는 구조의 사이트에서 더욱 빨리 효율적으로 정보를 파악할 수 있어 검색 결과의 노출에 유리할 수 있게 해준다.
웹 접근성에 효율적
- 일반적인 브라우저에서는 차이가 없지만 스크린리더(시각장애인을 위한 웹 서핑 프로그램)과 같은 환경에서는 웹 접근성과 사용성을 향상시켜준다.
유지보수의 용이성
- 많은 div사용으로 관리가 어려워지는 문제점에서 벗어나 태그의 이름만 보고도 어떤 영역인지 바로 확인이 가능하며 해당 태그 영역의 특성에 맞는 작업을 구분하여 진행하기에 용이하다.

시멘틱태그의 종류

<header> 머리글, 제목, 헤더
<nav> 네이게이션, 목차, 리스트 등 다른 페이지로의 이동을 위한 링크 공간을 위주로 표현
<aside> 좌측과 우측 사이드 위치의 공간을 의미하며, 본문 외에 부수적인 내용을 주로 표현하는 태그
<section> 말그데로 주제, 카테고리 별로 섹션을 구분하는 용도의 태그로 주로 사용. 같은 테마를 가진 여러개의 콘텐츠의 그룹화
<article> 기사, 블로그 등 텍스트 위주의 페이지를 구성할때 주로 사용.
<footer> 바닥글, 문서 하단에 들어가는 정보 구분 공간을 표현하는 태그
<address> 콘텐츠 작성자나 사이트 소유자의 정보등을 부가적으로 담는 기능
<hgroup> 제목과 관련된 부제목을 묶는 태그
<main> 이름처럼 문서 <body>의 중심 주제, 주요 내용 또는 응용 프로그램의 중심 기능과 직접 관련되어나 확장되는 콘텐츠를 나타낸다.
<details> 주변 문맥에서 표시된 구절의 관련성 또는 중요성으로 인해 참조 또는 표기 목적으로 표시되거나 강조된 텍스트를 나타냅니다.
<figure> 이미지, 다이어그램, 사진 등 독립적인 컨튼츠 정의시 사용
<figcaption> <figure> 요소의 설명 캔션(caption) 정의
<mark> 현재 맥락에 관련이 깊거나 중요한 부분 강조
<time> 시간의 특정 지점 또는 구간, datetime과 같은 속성을 이용해 알림같은 기능 구현
<summary> details 요소에 대한 요약, 캡션 또는 범례를 지정합니다. summary 요소를 클릭하면 상위 details 요소의 상태가 열리고 닫힙니다.

Semantic HTML in React

(리액트 공식문서 번역)

시맨틱 HTML은 웹 애플리케이션에서 접근성의 기초입니다. 웹사이트의 정보의 의미를 강화하기 위해 다양한 HTML 요소를 사용하면 접근성을 무료로 향상시킬 수 있습니다.

가끔 우리는 우리의 React 코드가 동작하도록 <div> 요소를 JSX에 추가할 때 HTML 시맨틱을 깨뜨릴 때가 있습니다. 특히 목록(<ol>, <ul> 및 <dl>)과 HTML <table>과 함께 작업할 때 이러한 경우에는 여러 요소를 그룹화하기 위해 React Fragments를 사용하는 것이 더 나은 방법입니다.

For example

import React, { Fragment } from 'react';

function ListItem({ item }) {
  return (
    <Fragment>
      <dt>{item.term}</dt>
      <dd>{item.description}</dd>
    </Fragment>
  );
}

function Glossary(props) {
  return (
    <dl>
      {props.items.map(item => (
        <ListItem item={item} key={item.id} />
      ))}
    </dl>
  );
}

컬렉션의 항목들을 다른 요소들과 마찬가지로 배열의 Fragment로 매핑할 수도 있습니다:

function Glossary(props) {
  return (
    <dl>
      {props.items.map(item => (
        // Fragments should also have a `key` prop when mapping collections
        <Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </Fragment>
      ))}
    </dl>
  );
}

Fragment 태그에 어떠한 props도 필요하지 않은 경우, 지원하는 도구가 있다면 짧은 구문을 사용할 수 있습니다:

function ListItem({ item }) {
  return (
    <>
      <dt>{item.term}</dt>
      <dd>{item.description}</dd>
    </>
  );
}

더 궁금하다면 the Fragments documentation

결론

리액트 공식 문서에서는 시맨틱한 웹 접근성을 위해 FRAGMENT를 구현했다고 예시로 소개한다. 불필요한 <div></div>를 사용하지 않는거다. 웹에서 보여주고 있는 내용에 맞는 적절한 태그로 HTML을 작성하는 것이 중요하다.

January

이전 포스트