[엄청 늦은 TIL]RN FlatList, AsyncStorage,SVG

기업 협업 부터, 취업 준비까지 핑계를 대자면 엄청 바쁘게 달려오다보니 해야지해야지 하던 블로깅이 무려 한달가까이 늦어버렸다.... 처음에는 '글의 퀄리티를 좀 높여서 블로깅을 해야지'라는 생각이었는데 내 기준으로 봤을 때 꾸준하지 못한게 더 악영향.. 조만간 깃블로그로 옮길 생각이지만 그걸 염두하고 미루기보단 우선 정리를 먼저 해야겠단 생각에 React Native 면접 과제를 하면서 유용햇던 몇가지를 정리하고자 한다.

FlatList

데이터를 뿌려주어야하는 경우에 당연하게도 map을 통해서 데이터를 랜더링 했는데 도중에 우연치 않게 FlatList에 대해 알게되었고, 고민끝에 map으로 랜더링 했던 내용을 지우고 FlatList 컴포넌트로 바꾸어 진행 했었다.

FlatList??

단순하게 생각했을때 RN 컴포넌트이면서 보이지 않는 부분은 랜더링 하지 않아 데이터가 많을 경우 map 보다 최적화에 도움이 되는것 같고, 무엇보다 쓰라고 만들었는데 굳이 안쓰는건 이치에 맞지 않다고 생각해서 바꾸게 되었다.

사용을 위해 실제 랜더링 되는 부분에는

<ListWrap
          keyExtractor={(item) => item.prefix}
          data={productList?.products}
          renderItem={renderItem}
          numColumns={2}
        />

위와 같이 data에 데이터를 넣어주고 renderItem으로 형태를 잡아준다고 생각하면 될것 같다.

const renderItem = ({ item }) => (
    <FlatWrap onPress={() => goToDetail(item.prefix)}>
      <ProductCard
        brand={item.brand?.name}
        uri={item.mainImage}
        productName={item.name}
        originalPrice={item.originalPrice}
        soldOut={item.soldOut}
        ssomeePrice={item.ssomeePrice}
        fontSize={14}
        prefix={item.prefix}
      />
    </FlatWrap>
  );

renderItem의 경우 바로 넣어주어도 되지만 아무래도 유지보수와 가독성을 위해 따로 함수로 만들어 작업 했다.

과정은 조금 버벅였지만 생각보다 어렵지 않게 적용했지만 세부적인 옵션이라던지 최적화 부분을 더 고려해 useMemo를 함께 사용한다던지 부분이 남아 있을 것 같다.

AsyncStorage

네이티브에서 Local Strage를 사용하기 위해 사용한 라이브러리로 자세한 내용은 참고한 블로그를 링크로 안내 하겠습니다.
차이점은 AsyncStrage라이브러리 자체가 업데이트가 되었고 Expo에서는 Expo install을 해주어야했는데 친절하게도 계속 하라고 안내가 터미널에 계속되서 따라해서 적용했습니다.

참고 블로그

SVG파일 사용

모바일 환경에서는 svg파일을 바로 사용할 수 없다는 것에 놀랐고 다행이도 편하게 사용할 수 있는 라이브러리가 있어 적용할 수 있었다. 참고한 블로그를 링크하도록 하겠습니다.
참고 블로그