# Flatlist

32개의 포스트
post-thumbnail

[React Native] FlatList 내에 FlatList 중첩 사용하기

RN에서 스크롤 영역이 필요하다면 ScrollView를 사용하는 방법과 FlatList를 사용하는 방법이 있다. ScrollView의 경우에는 한번에 전체 영역을 렌더링하고, FlatList는 화면에 보일 만큼, 또는 설정한 수 만큼만 초기 렌더링한다는 특징이 있다.

2023년 5월 20일
·
0개의 댓글
·
post-thumbnail

ReactNative의 SearchBar와 FlatList로 검색창 만들기

맨 처음에 이 프로젝트를 기획했을 때는 오로지 칵테일 추천 챗봇을 만드는 것이 목적이었다. 하지만 점점 이야기를 나누면서 앱의 최종적인 기능들이 정해졌다!홈 화면칵테일 추천 챗봇홈 화면 추천자유대화 챗봇상세화면즐겨찾기검색창\*\*이중에 오늘은 검색창 기능에 집중해보려고

2023년 5월 15일
·
0개의 댓글
·
post-thumbnail

[번역] FlatList 최적화하기

FlatList를 최적화하기 위한 props와 list item 렌더링 팁

2023년 5월 7일
·
0개의 댓글
·

FlatList

CellRendererComponentFlatList에서 onLayout을 통해 y좌표를 얻을때는 부모 컴포넌트의 상대좌표값만을 얻을 수 있다.그래서 가장최상단으로부터 offsetY를 얻을 수 없다. 만약 절대좌표값을 알고 싶다면 renderItem 대신 CellRen

2023년 4월 5일
·
0개의 댓글
·
post-thumbnail

검색 구현하기 in React , React-Native(Flatlist 무한스크롤 프론트에서 구현)

일단 검색 구현에는 두가지 방법이 있다서버를 끼고 검색하기\-> 텍스트를 입력 할 때마다 해당 텍스트를 서버로 보내서 서버에서 일치하는 리스트를 보내주면 해당 리스트를 뿌려준다.서버를 끼지 않고 전체 리스트를 받은 후 클라이언트 단에서 검색 구현\-> 모든 데이터를 서

2023년 3월 14일
·
0개의 댓글
·
post-thumbnail

React-Native 드래그앤 드롭 FlatList 만들기(react-native-draggable-flatlist)

React-Native 드래그앤 드롭 FlatList 만들기(react-native-draggable-flatlist)

2023년 3월 13일
·
0개의 댓글
·
post-thumbnail

React-Native FlatList 특정 데이터 선택하기

FlatList 를 사용한 리스트에서 특정 값을 선택하고 선택 됨을 표시되게 하는 부분이 필요했고 이렇게 코드를 사용했다.

2023년 3월 10일
·
0개의 댓글
·

배열 무작위로 섞기

java script 배열 무작위로 섞기

2023년 3월 10일
·
0개의 댓글
·
post-thumbnail

React Native에서 가장 빠른 List : FlashList

이번 글에서는 React native에서 사용하는 List 라이브러리를 소개하려 합니다.React Native에는 List를 표현하는 방법으로 ScrollView / FlatList / SectionList 를 이용하여 구현할 수 있습니다. 보통은 FlatList를 이

2023년 1월 12일
·
0개의 댓글
·

[Today I Learned] 1월 1주차 day5

scrollView 는 모든 리스트들을 한번에 렌더링 해야해서 리스트가 많을수록 성능이 저하된다.반면 FlatList 는 화면에 보이지 않는 리스트들은 메모리에서 제거하고 보이는 부분만 렌더링을 하여 성능저하를 최소화 시킨다.리스트가 많거나 무한스크롤(infinite

2023년 1월 8일
·
0개의 댓글
·

[Native] FlatList

scrollView 와 거의 같은 태그.ScrollView 는 첫 렌더링에 모든 리스트를 렌더링 하지만FlatList 는 화면에 보여지는 리스트만 렌더링 하여list 의 content 량이 많다면 비효율 적이다. -> FlatList 사용!예제FlatList 는 자식을

2023년 1월 4일
·
0개의 댓글
·

FlatList + reanimated 잘 안 된 다

FlatList 안에 Swipeable item 기능 구현 중 Implement swipeable item from scratch pure reanimated w/ gesture-handler 에니메이션 효과가 많이 적용될수록 flatlist life cycle과 궁합

2022년 11월 28일
·
0개의 댓글
·

React native 무한스크롤 (FlatList)

FlatList는 ScrollView처럼 많은 양의 데이터를 처리할 수 있게 해준다.

2022년 9월 25일
·
0개의 댓글
·

FlatList

React Native FlatList 정리

2022년 6월 20일
·
0개의 댓글
·

search.js

들어가기insta에서 사진의 caption에 있는 단어들을 근거로,검색을 해서 사진을 찾아서 뿌려줄 수 있다.사진을 클릭 하면, 사진을 feed에 나오는 사진처럼 like, comment, 등등을 볼 수 있다.화면 바깥을 클릭했을때, 키보드가 사라지는 component

2022년 5월 31일
·
0개의 댓글
·

Flatlist, Pull to Refersh

들어가기폰 화면을 밑으로 내렸을때, refresh, reload되게 하는 기능Flatlist안에 포함되어 있는 기능임.

2022년 5월 27일
·
0개의 댓글
·

Flatlist, useQuery

들어가기seeFeed Query를 useQuery를 이용해서 data를 불러온 다음에Flatlist로 뿌려줌, web에서는 map으로 뿌렸는데app에서는 Flatlist로 뿌려줌.Scrollview를 이용해도 되지만, 이어서 infiniteScroll까지 사용하기 위해

2022년 5월 27일
·
0개의 댓글
·

ScrollView Vs FlatList

https://reactnative.dev/docs/scrollview https://reactnative.dev/docs/flatlist 공식문서~ scrollview는 한번에 모든 data rendering so this has a performance dow

2022년 4월 27일
·
0개의 댓글
·
post-thumbnail

Infinite Scroll

Screen에서 Loading을 한꺼번에 하지않고 화면이 밑으로 도달할때 쯤, 다시 Loading을 함.블랙핑크 제니의 인스타그램 follow를 본다고 생각해 보면됨.very difficult ㅜㅜ 초집중이 팔요함.https://react-query.tanst

2022년 4월 10일
·
0개의 댓글
·
post-thumbnail

[RN-CheatSheet] FlatList EmptyComponent 가운데 정렬하기

FlatList 의 ListEmptyComponent 프롭을 통해서 data 가 비어있을때, 렌더링될 컴포넌트를 전달할 수 있다.일반적으로 아무 스타일 없이 넘기게 될 경우 다음과 같이 나오게 된다.보통 가운데 정렬을 하기 위해서, contentContainerStyl

2022년 3월 10일
·
2개의 댓글
·