컴포넌트 최상위 태그 규칙 논의

[uraflower]

컴포넌트 최상위 태그 규칙 논의

컴포넌트 최상위 태그를 어떻게 하는 게 좋을까요?
저는 빈 태그 (<>)나 아티클(<article>)로 하는 게 좋다고 생각합니다! 근데 아티클은 사실 이렇게 쓰는 게 맞는지 잘 모르겠어요. 😅 또 괜히 불필요한 요소가 추가되는 게 아닌가 싶기도 해요.

const ProductList: React.FC = () => {
  return (
    <>
      <CategoryList />
      <SearchResult />
    </>
  );
};

[ohgus]

상황에 따라서 다르게 사용하지만 보통은 빈태그를 많이 사용합니다!

[devkyoung2]

참고

전체 영역(최상위) : {컴포넌트 이름} Container
영역의 묶음 : {Name} Area

어떤가요?

최상위 태그에 스타일을 적용해야 할일이 있을때는 빈태그가 조금 불편할것같아요

++ 근데 영역의 묶음을 사용할 일이 있을까요 ?

[uraflower]

참고하신 자료랑 말씀하고 계시는 건 스타일드컴포넌트에서의 클래스 네이밍 아닌가요? 헷갈리고 계시는 것 같아요.

보경님 말씀대로면 코드가 이런 식이 되는데,
얘네 하나하나가 컴포넌트라서 만들어줘야 하는데 ProductListContainer는 만들 게 없잖아요.
그냥 ProductList와 사실상 같으니까요.

const ProductList: React.FC = () => {
  return (
    <ProductListContainer>
      <CategoryList />
      <SearchResult />
    <ProductListContainer />
  );
};

[devkyoung2]

아 저게 스타일드 컴포넌트 내부에서 라는 말이 있는데 그거랑 헷갈린건 아니고 네이밍이 깔끔해보여서 가져온 자료였어요
저는 미림님께서 작성하신대로 작성하려고 했었어요
ProductListContainer 에 스타일을 적용할 수도 있을 것 같아서 낸 의견이었습니다

[uraflower]

일반적인 경우에는 관습에 따라 빈 태그(<>)를 사용하되,
최상위 태그에 스타일을 적용해야 하는 경우에만 다른 태그를 사용하는 건 어떨까요?

어떤 태그를 사용할지는 저희가 정하면 될 것 같구요.
예를 들어서 div나 article, section 같은 태그를 사용할 수 있을 것 같아요.

[uraflower]

작은 컴포넌트(ex. 버튼)같은 경우는 div로 감싸고
실제로 레이아웃에서 큼직큼직한 영역을 차지하는 컴포넌트(ex. 실시간 급상승 랭킹 박스)는 section으로 감싸고
이러한 section들을 감쌀 필요가 있다면(ex. 페이지) article로 감싸는 건 어떤가요..?

아직까지는 article까지 쓸 일이 있나? 싶긴 하지만 혹시 몰라서 규칙 상으로 만들어놓는 건 좋을 거 같아요.

[uraflower]

다시 정리합니다

• <>: 일반적인 경우 빈 태그로 감쌉니다.
• <section>: 말 그대로 어떤 영역입니다.
• <article>: 의미를 갖는 독립적인 콘텐츠 조각입니다. (ex. 상품 리스트 아이템, 상품 상세 콘텐츠 등)
• <nav>: 내비게이션 링크들을 모아놓은 그룹입니다. (ex. 사이드바)
• <aside>: 핵심이 되는 콘텐츠의 직접 속하지 않는 보조 콘텐츠입니다. (ex. 상품 상세 조회 페이지 - 상품 옵션 선택 등)
• <div>: 사용할만한 시맨틱 태그가 없는 경우, 또는 스타일 지정을 위해 사용합니다.

[devkyoung2]

확인했습니다~

[ohgus]

확인했습니다!

[devkyoung2]

저는 원래 최상위 태그 작성할때 컴포넌트 이름이랑 동일하게 사용했었어서 컴포넌트이름 + container 라고 작성하려고 했는데 린트에 걸리네요 ㅠ

[uraflower]

그게 린트에 걸리는 게 컴포넌트가 없어서(import를 안해서) 걸리는 거 아닌가요?
그러니까 최상위 태그를 ProductListContainer처럼 일반적인 html에서 제공하는 태그가 아닌 다른 컴포넌트로 만들어서 사용하려면
ProductListContainer라는 빈 컴포넌트를 만들고 여기에 className을 달아서 스타일을 입혀줘야 하는 거 같은데
이렇게 하자는 말씀이 맞나요?

제가 보경님 말씀이 잘 이해가 안되는데..
ProductListContainer를 최상위 태그로 한다고 치면 ProductListContainer라는 컴포넌트가 필요하잖아요.
그럼 ProductListContainer.tsx는 어떻게 구현되어 있는 건가요??

[devkyoung2]

아 제가 이런식으로 그냥 냅다 컴포넌트 이름을 박았었는데 웹규격에 맞지 않는것같아요
위에 미림께서 말씀하신대로 하면 좋을것 같습니다!

[devkyoung2]

#45 반영하시면 승인하겠습니다!