카드 구성 요소 생성을위한 고려 사항

이 기사는 유연하고 재사용 가능한 React 카드 구성 요소를 생성하기위한 설계 고려 사항을 탐구합니다. 여정은 간단한 구현으로 시작하여 적응성을 향상시키기 위해 다양한 접근 방식을 점차적으로 조사합니다.

처음에는 기본 카드 구성 요소가 제시됩니다.

 const card = props => {
  반품(
    <div classname="card">
      <h2 id="props-title">{props.title}</h2>
      <p>{props.content}</p>
    </div>
  ))
}

간단한 사용 사례의 경우 기능적이지만이 설계는 한계를 빠르게 보여줍니다. 다양한 헤더 레벨 (H2, H4 등)과 컨텐츠 구조가 필요하기 때문에보다 정교한 API가 필요합니다. 몇 가지 대안이 탐색됩니다.

• 조건부 렌더링 : 소품을 사용하여 헤더 레벨을 제어 :

 const card = props => {
  반품(
    <div classname="card">
      {propss.type === "big"&&<h2 id="props-title"> {props.title}</h2> }
      {propss.type! == "big"&&<h4 id="props-title"> {props.title}</h4> }
      <p>{props.content}</p>
    </div>
  ))
}

• 동적 헤더 태그 : level 소품을 기반으로 헤더 태그를 프로그래밍 방식으로 생성합니다.

 const card = props => {
  const headertag =`h $ {props.level}`;
  반품(
    <div classname="card">
       {props.title} {headertag}>
      <p>{props.content}</p>
    </div>
  ))
}

• 별도의 헤더 구성 요소 : 더 나은 구성을 위해 헤더를 자체 구성 요소로 추출합니다.

• 유연한 컨텐츠 래퍼 : a<div> 임의의 HTML 컨텐츠를 허용합니다.<li><p> <strong>어린이 소품 :</strong> <code>content 소품 대신 콘텐츠로 어린이를 수용하여보다 복잡한 콘텐츠 구조를 가능하게합니다.

• 사용자 정의 가능한 클래스 이름 : 사용자가 className 소품을 통해 사용자 정의 클래스 이름을 추가 할 수 있습니다.

• 사용자 정의 가능한 외부 태그 : 외부 태그 허용 (현재 a<div> ) 구성 가능합니다.<p> 궁극적 으로이 기사는 매우 유연하지만 최소한의 의견이 많은 접근법을 주장합니다.</p> <pre class="brush:php;toolbar:false"> const card = ({tag = 'div', classname = 'card', ... props}) =&gt; { const tag = tag; 반품 ( &lt;tag classname=&quot;{className}&quot;&gt; {props.children} &lt;/tag&gt; ); };</pre> <p> 이 최종 반복은 사용자가 아동을 통해 전적으로 외부 태그, 클래스 이름 및 내용을 제어 할 수 있도록하여 유연성을 우선시합니다. 이 기사는 API를 과도하게 엔지니어링하는 것에 대해 경고하여 과도한 복잡성의 가능성과 유연성과 유용성 사이의 균형을 찾는 것의 중요성을 강조합니다. 저자는 이상적인 수준의 유연성이 신중한 고려의 문제이며 예상되는 사용 사례에 크게 의존한다고 강조함으로써 결론을 내립니다.</p> </div>