Eojin Han

section 언제 써야 하는가?페이지 레벨 컴포넌트 예시 & 생각정리 컴포넌트를 가져다 쓰면서 페이지를 위한 구획을 만드는 경우 페이지만을 위한 맞춤화된 완성형 컴포넌트

section

<section> HTML 요소는 문서에서 특정한 의미를 가진 다른 semantic tag로 표현할 수 없는 독립적인 섹션을 나타냅니다.

섹션은 매우 드문 예외를 제외하고는 항상 heading(h1~h6)을 포함해야 한다.

📌

섹션인가?에 대한 물음을 heading이 들어가는 독립적인 요소인가? 로 판단하면 될까?


<section>
  <h1>상품들</h1> 헤딩이 있다.
  <ul>
    <li>
	    상품카드 하나하나 독립적인 콘텐츠 블록 이므로 아티클
      <article class="product-card">
        <h2>상품명 1</h2>
        <p>상품 설명</p>
        <button>구매하기</button>
      </article>
    </li>
    <li>
      <article class="product-card">
        <h2>상품명 2</h2>
        <p>상품 설명</p>
        <button>구매하기</button>
      </article>
    </li>
  </ul>
</section>

언제 써야 하는가?

일반적인 하위 components 에서 section 태그로 감싸는 것은 적절하지 않다.

구획을 나누는 역할이라는 것을 명심하고, 아래와 같은 상황에서만 써야한다.

페이지 레벨: 페이지 내에서 구획을 나누고자 할 때 사용 (예: 페이지 내 주요 섹션들로 나누기).

article 레벨: article 태그 안에서 독립적인 콘텐츠를 여러 부분으로 나누고자 할 때 사용.

페이지 레벨 컴포넌트 예시 & 생각정리

컴포넌트를 가져다 쓰면서 페이지를 위한 구획을 만드는 경우

공용 컴포넌트들을 가져와서 사용하면서 특정 페이지만을 위한 추가 요소들을 포함한 상위 컴포넌트를 만드는 경우


export const CarouselPosts = async () => {
  const posts = await getNonFeaturedPosts();

  return (
    // 페이지 레벨 컴포넌트니까 section 태그로 감쌀 수 있다.
    <section className="my-4">
      <h2 className="text-2xl font-bold my-2">You May Like</h2>

      {/* 유저와 상호작용 필요한 부분이니까 MultiCarousel은 CSR로 */}
      <MultiCarousel>
        {posts.map((post) => (
          <PostCard key={post.path} post={post} />
        ))}
      </MultiCarousel>
    </section>
  );
};

MultiCarousel 이라는 공용 컴포넌트를 가져와서 쓰는데, 특정 페이지를 위한 api 호출과정과 헤딩을 연결해서 페이지의 한 섹션을 만듦.

페이지만을 위한 맞춤화된 완성형 컴포넌트

form 요소

form은 일반적으로 특정 페이지만을 위한 맞춤형으로 만들어진다. 특정 페이지에 맞춘 컴포넌트라면, 해당 페이지에서만 사용하는 완성형 컴포넌트로 보는 것이 자연스럽다.

컴포넌트가 페이지 레벨에서만 의미가 있는 요소라면, 페이지 레벨에서 관리하는 것이 좋다.

페이지 레벨에서 section으로 감싸는 접근은, 그 페이지의 구조와 의미를 명확하게 나누기 위한 좋은 방법이다. form처럼 하나의 큰 단위로 완성된 컴포넌트는 페이지에서 전체적인 레이아웃을 구성하면서 적절한 section으로 감싸는 것이 논리적이다.

따라서 form은 일반적으로 페이지의 한 구획을 차지하며, 특정 페이지만을 위해 만들어지는 페이지 레벨의 컴포넌트라고 볼 수 있고, 따라서 section 태그로 감싸져도 된다.

ℹ️

개인적인 생각 form이 보통 독립적인 콘텐츠이지만, 페이지를 구성할 때 아래와 같이 헤딩을 추가한다거나 하는 페이지를 꾸미기 위한 요소들이 추가되기도 한다.

이런 경우에는 이것까지 묶어서 form section 이라고 보는 것이 더 적합하다.

그런데 form 요소가 section으로 감싸져 있다면 너무 과한 섹셔닝이 될 수 있다고 생각한다.

따라서 컴포넌트 레벨은 사실 section으로 감싸지 않는 것이 가장 좋지 않을까?

페이지 레벨에서 section, section 이렇게 명시적으로 구분을 더 해줘야 하는 불편함은 있을 수 있지만, 가장 논란의 여지가 없는 구분방식이라는 생각이 든다.


<section>
  <h2 className="text-3xl font-bold m-8">Or Send Me an email</h2>
  <ContactForm />
</section>