React 디자인 패턴 - 컴포저블 카드 [2]

요약 🏗

시리즈의 첫 번째 포스트에서는 Compound Pattern을 사용하여 일련의 하위 구성 요소로 확장할 수 있는 Card 구성 요소를 만들었습니다.

그러나 구성 요소 인스턴스화에 삽입되는 순서는 렌더링되는 순서와 관련이 있습니다. 자유도가 더 높지만 다음 장에서 구현할 스타일 및 기능과 관련된 다양한 복잡성과 관련이 있습니다.

Take a look at the or tweak in the repo

~ 그러므로 ~

이 게시물의 목표는 카드 인스턴스화에 사용된 순서에 관계없이 하위 구성 요소의 위치가 잘 정의된다는 것을 얻는 것입니다.

This theme is particularly close to my heart as I want to build a product that does not force the user to open it (unless they feel like it)

나는 이것을 두 단계로 달성할 것이다

사용된 각 하위 구성 요소에 대한 상대 참조 매핑

각 하위 구성 요소를 카드 경계 내 특정 위치에 배치(다음 게시물에서)

하위 구성 요소 및 이전 게시물에서 만든 도우미 메서드의 인구 조사에 채택된 것과 유사한 접근 방식을 사용하여 각 하위 구성 요소를 추정하고 참조를 적절한 범주에 저장하여 언제든지 재사용할 수 있습니다. 나중에 📼

그런 다음 아이들을 도우미 메서드로 그룹화합니다.

touch src/utils/groupChildren.js

registerChildren처럼 Card 생성자에서 사용하는 함수입니다.


Card.js(세부정보)

import groupChildren from '../../utils/groupChildren'
...
constructor(props) {
    super(props)

    const { children } = props
    if (!children) return

    registerChildren(blueprint, props.children, true)

    const groups = groupChildren(blueprint, props.children)
  }

groupChildren 함수는 이전 함수와 마찬가지로 반복할 청사진과 실제 자식을 받습니다.


countChildren.js(부분)

import React from 'react'
import getBlankInstance from './getBlankInstance'

const groupChildren = (blueprint, children) => {
  const groups = getBlankInstance(blueprint, [])

  console.log(groups)
}

export default groupChildren

먼저 청사진과 동일한 구조의 객체를 생성합니다. 이전 게시물의 사용법과 달리 두 번째 인수  -  빈 배열을 전달합니다.
청사진이 있는 경우


config.js

export const blueprint = {
  Header: 1,
  Image: 0,
  Description: 1,
  Footer: 1,
}

해당 그룹이 해당 유형의 개체와 일치하도록 하겠습니다.


console.log(그룹)

{
    Header: [],
    Image: [],
    Description: [],
    Footer: []
}

그래서 나는 아이들을 반복하고 각각을 적절한 배열에 넣을 수 있습니다.


countChildren.js(부분)

import React from 'react'
import getBlankInstance from './getBlankInstance'

const groupChildren = (blueprint, children) => {
  const groups = getBlankInstance(blueprint, [])

  React.Children.forEach(children, child => {
    const { name } = child.type
    groups[name] = [...groups[name], child]
  })

  return groups
}

export default groupChildren

groups 에서 각 하위 구성 요소가 식별되고 하위 구성 요소 이름과 속성 간의 긴밀한 일치를 활용하여 올바른 위치에 쉽게 배치할 수 있습니다.

As in the previous post, for the purposes of this post I am assuming that all direct children of Card are a sub-component of it and never any other HTML tag. This is certainly a limitation, but can be easily circumvented by means of another design pattern, the Context API

~ 요약 ~

다음과 같이 카드 구성 요소 및 자식 사용


App.js(세부정보)

<Card>
  <Card.Header>Never talking</Card.Header>
  <Card.Description>Just keeps walking</Card.Description>
  <Card.Footer>Spreading his magic</Card.Footer>
</Card>

groupChildren의 상품으로서 GET


groupChildren() 출력(간소화)

{
    Header: [
        0: {
            $$typeof: Symbol(react.element),
            props: { children: "Never talking" }
            type: {
                name: "Header"
            }
        }
    ],
    Image: [],
    Description: [{...}],
    Footer: [{...}]
}

이렇게 구성된 하위 구성 요소를 실제로 악용할 수 있는지 확인하기 위해 테스트를 수행합니다.


Card.js(생성자 세부정보)

const groups = groupChildren(blueprint, props.children)
this.groups = groups

그리고 렌더링에서 {this.props.children}를 다음으로 바꿉니다.


Card.js(렌더 세부정보)

render() {
    return <article className='card'>{this.groups.Header[0]}</article>
  }

실제로 Header 하위 구성 요소와 그 내용만 카드에 나타납니다. 무한한 수의 HTML 태그 안에 넣을 수 있습니다. 마음대로 복제할 수도 있습니다 - 내가 말한 곳에 나타납니다.

I can therefore position with a high degree of precision where any child will have to be rendered

그러나 이것은 각 하위 구성 요소에 대해 염두에 두어야 할 몇 가지 사항이 있으므로 사용하려는 접근 방식이 아닙니다.

사용했는지 안했는지?

두 개의 헤더가 부여되어 제공된 경우 두 번째 헤더는 어떻게 해야 합니까? 그리고 가능한 제3자?

다음 날 Card - i.e.<Card layout="minimal" />에 소품을 전달하여 다른 유형의 레이아웃을 생성하려면 어떻게 합니까?

청사진의 복잡성과 함께 증가할 수 있는 너무 많은 사건. 잠재적인 혼란이 너무 많습니다 👹
나는 그것을 돌볼 무언가가 필요합니다  -  Builders 🔨 (향후 포스트에서)


읽어주셔서 감사합니다. 다음 장으로 곧 만나요
이 일련의 게시물을 작성하면서 업데이트하는 Repo: repo
마음에 드시면 연락주세요GitHub ,