[React Native Expo] FlatList와 SetcionList

처음엔 무지성으로 ScrollView을 썼는데 ScrollView를 써서 api를 호출하면 한 화면에 있는 api를 한번에 다 호출하기때문에

렉이 꽤나 걸리게되며 최적화가 안좋았다 그래서 FlatList를 쓰고자했는데 문제는 ScrollView와 FlatList가 중복적용이 안되는거였다

하지만 FlatList와 SetcionList는 중복이 가능했다

    const SECTION = [
    {
      title: "hot",
      data: ["hot"],
    },
    {
      title: "ad1",
      data: ["ad1"],
    },
    {
      title: "picklist",
      data: ["picklist"],
    },
    {
      title: "tip",
      data: ["tip"],
    },
    {
      title: "ad2",
      data: ["ad2"],
    },
    {
      title: "pickbetter",
      data: ["pickbetter"],
    },
    {
      title: "tag",
      data: ["tag"],
    },
    {
      title: "notice",
      data: ["notice"],
    },
  ];
  
  <SectionList
    sections={SECTION}
    keyExtractor={(item, index) => item}
    onScroll={HomeScroll}
    renderItem={({ item }) => {
      switch (item) {
        case "hot":
          return <HomeList type="hot" />;
        case "ad1":
          return (
            <View ref={AdRef1}>
              <HomeAdThumbnail />
            </View>
          );
        case "picklist":
          return (
            <>
              <HomePickList />
              <Empty />
            </>
          );
        case "tip":
          return <HomeList type="tip" />;
        case "ad2":
          return (
            <View ref={AdRef2}>
              <HomeAdThumbnail />
            </View>
          );
        case "pickbetter":
          return <HomePickBetter />;
        case "tag":
          return <HomeList type="tag" />;
        case "notice":
          return <HomeNotice />;
      }
    }}
    ListHeaderComponent={
        <HomeBanner />
    }
  />

 

배너는 ListHeaderComponent로 상단스크롤섹션으로 주고

섹션을 하나씩 배치했다 그리고 이 안에 FlatList는

<FlatList
  disableVirtualization={false}
  data={listData}
  ListHeaderComponent={
    <>
      <Title>
        <TitleTxt>공지사항</TitleTxt>
      </Title>
    </>
  }
  ListFooterComponent={
    <BtnMoreComponent Theme={Theme} FncMore={fncMore} name="공지사항" />
  }
  renderItem={({ item, index }) => (
    <ListItem key={index} noneTag={true} idx={index} {...item} />
  )}
/>

요런식으로 배치