이번에 앱의 화면을 구성하면서 리스트 형태의 뷰를 만들어야 했다.
그래서 기존에 사용하던 ListView를 사용하려고 react native 공식사이트를 들어갔다.
하지만이번에 리스트뷰가 Deprecated 되어서 FlatList나 SectionList를 사용할 것을 권하는 문구를 보았다.
그러다 보니 FlatList를 활용하게 되면서 삽질하기도 하면서 몇 가지 알게 되어서 간단하게 속성과 사용법을 정리해 올리게 되었다.
사용한 리스트 구현 코드는 다음과 같다.
결과화면 :
아마 공식사이트를 보면 만들 수 있는 간단한 화면일 것이다. 근데 쬐금 헤매게 했던 거는 저 헤더 부분이다.
(접수번호 제목 ... 회색 섹션 부분)
개발 요건 중 하나가 저 부분이 리스트 아래 부분으로 스크롤을 해도 안 내려가게 해야 하는 것이었다. 맨 처음 구글링 했을 때는 SectionList를 활용하면 된대서 따라 하다가 삽질만 하고 포기했다.
그러다 계속 구글링 하다 stickyHeaderIndices={[0]} 만 추가하면 된다해서 수정해주었다. 굉장히 허탈했다..;;; 위 한줄이 의미하는건 고정하는 헤더를 0번째있는 리스트 헤더아이템으로 사용하겠다는 의미이다.
이외에도 간단하게 정리하면 다음과 같다.
data : 리스트에 보여줄 데이터다. 보통 객체 배열을 넣어주면 된다.
객체 배열은 다음 형식으로 되있다.
let data = [
{ no : 1, name : 'test1' },
{ no : 2, name : 'test2' },
];
renderItem : 여기에서는 각 아이템 부분을 어떻게 렌더링 할 것인지 정해준다.
ListHeaderComponent : 헤더 부분을 어떻게 렌더링할 것 인지 정해준다.
ListEmptyComponent : 리스트에 데이터가 비었다면 어떻게 렌더링 할 것인지 정해준다.
removeClippedSubviews : 기본상태는 true, true로 되있으면 많은 데이터를 끊김없이 보여준다. 대신 버그가 있을 수 있으니 각자의 상황을 고려해 사용에 유의해야한다고 공식 사이트에 써있다.
keyExtractor : 각 아이템의 키 값을 지정해준다.
renderItem을 자세하게 설명하면 다음과 같다.
renderItem에는 JSX를 return 하는 메소드를 지정해주면 되고
지정방법은 다음과 같다.
이렇게 하면 객체 배열이 순차적으로 돌면서 각 객체를 item이라는 파라미터로 넘겨준다. 그래서 그 객체의 속성을 사용해서 입맛에 맞게 뷰(JSX)를 만들어서 리턴해주면 된다.
나머지 ListHeaderComponent 와 ListEmptyComponent도 사용방법이 똑같다.
이렇게 대충 FlatList를 정리했다.(물론 공식사이트에는 위에 언급한 속성보다 더 많이 있다.... 이 부분은 나중에 또 삽질하면서 배워야한다!)
이번에 FlatList를 사용해보면서 리스트 화면을 어떻게 만들고 어떠한 사용해야하는지 알 수 있었던 것 같다.
chk1222