항목 목록을 표시하는 것은 웹 개발자가 항상 하는 일입니다. React에는 항목 목록을 렌더링하는 표준 방법이 없지만 확실히 알아두면 좋은 패턴이 있습니다. 이 게시물에서 그 중 일부를 살펴보겠습니다.

자식 배열

childrenprop 에서 목록 요소를 전달하는 대부분의 경우에 작동해야 하는 기본 접근 방식부터 시작하겠습니다 .

나는 React.Children.map을 사용 하므로 children단일 항목인지 항목 배열 인지 걱정할 필요가 없습니다 . 통지 ListView구성 요소가리스트 구조에 대한 책임이 예에서는 의미 론적으로 유효한 주장 ul과 li태그 배열을. 사용 예는 다음과 같습니다.

매우 간단하고 읽기 쉽습니다! 미리 항목 수를 모르는 경우에도 이 방법을 사용할 수 있습니다.

순서를 바꾸거나 필터링할 수 있는 목록을 렌더링할 때마다 키 소품을 제공해야 한다는 점을 기억하세요 (그렇지 않으면 React에서 경고합니다).

렌더 소품

두 번째 접근 방식은 더 유연하지만 약간 더 복잡합니다. 렌더링 소품 패턴 에 대해 이야기하고 있습니다. 목록 코드는 다음과 같습니다.

명시적으로 Item유형을 정의하므로 재사용할 수 없다는 것을 눈치채셨을 것입니다 . 더 잘할 수 있습니다. TypeScript Generics를 사용하여 목록이 구체적인 Item인터페이스에 연결되지 않도록 합시다 .

이제 모든 항목이 AbstractItem인터페이스를 충족하는 한 모든 항목 배열과 함께 작동할 것 입니다. 이것이 어떻게 사용될 수 있는지 봅시다.

TypeScript는 renderer함수 에서 항목 유형을 적절하게 고려 합니다.

그렇다면 렌더링 소품 패턴이 더 강력한 이유는 무엇입니까? 이전 접근 방식으로 반응 노드뿐만 아니라 원시 항목 데이터에 액세스할 수 있습니다. 이것은 많은 사용 사례를 가질 수 있습니다. 예를 들어 항목을 표시하기 전에 필터링하는 데 사용할 술어를 제공할 수 있습니다.

클라이언트는 filterFn단일 항목을 허용하고 부울 값을 반환하는 항목을 지정할 수 있습니다 .

이 예에서는 처음 두 항목만 렌더링됩니다.

요약

보다 구체적인 요구 사항을 충족하도록 조정할 수 있는 몇 가지 기본 빌딩 블록을 제시했습니다. 그것들이 유용하기를 바랍니다. 읽어주셔서 감사합니다!