Scroll View 대신 FlatList 사용해보기

1. Scroll View 와 FlatList의 차이점. 

ScrollView는 화면에 보이지 않는 부분도 다 랜더링하여 만들어 놓는다. 그리고 사용자가 화면에서 벗어나는 부분을 보고 싶으면, 스크롤 해서 볼 수 있게 만든다. 데이터 양이 많지 않고 고정적일 때 사용한다. 

 

반면 FlatList는 화면에 보이는 부분만 랜더링하여 만들어 놓는다. 만약 사용자가 보이지 않는 부분을 보고 싶어 스크롤 할 시  그 때 안 만들어 놓은 내용들을 만든다. 미리 모든 내용을 만들어 놓는 Scroll View와 비교했을 때 압도적으로 좋은 성능을 보인다. 

2. 코드 리뷰 

(1) FlatList의 속성들 뜯어보기 

      <FlatList
        data={isOpened ? friendProfiles : []}
        contentContainerStyle = {{paddingHorizontal: 15,}}
        keyExtractor={(_, index) => index}
        ItemSeparatorComponent={ItemSeparatorComponent}
        stickyHeaderIndices={[0]}
        renderItem={renderItem}
        ListHeaderComponent={ListHeaderComponent}
        ListFooterComponent={ListFooterComponent}
        showsVerticalScrollIndicator ={false}
      >

a. Data

: FlatList에서 스크롤 되는 본문(body) 내용이 들어가는 곳

b. contentCotainerStyle 

: 이건 저번 ScrollView 에서도 봤듯이, scroll 되는 곳의 내용물에게 스타일을 적용하는 속성이다. 

  스크롤 뷰나 flatlist는 현재 보여지는 부분의 틀과, 스크롤되는 내용들이 별개로 존재한다.

따라서 그냥 style을 적용하면, 저 현재 보여지는 부분의 틀에 작용한다.  

c. KeyExtractor  

:  ScrollView에서 Map이라는 함수를 사용하여, data의 정보들을 하나씩 가져와서 ScrollView에 담았었다. 

Map 함수는 data.js에 있는 배열의 데이터 원소들을 차례대로 가져와서 () 안의 로직을 수행했다. 

이때 Map은  함수 내용 최상단에 값들에 대한 Key를 적어줘야 했다. Key는 Value 마다 고유해야 하므로, 여기서는 index를 사용했었다. flatList도 마찬가지고 renderItem이란 함수를 만들어 map 과 같이 움직이도록 했다.  renderItem도 key 값을 최상단에 써줘야 한다. 하지만 FlatList는 Key 값 적는 속성을 따로 둘 수 있고 여기다가 적을 시 renderItem 내부에 안 써줘도 된다. 이것이 KeyExtractor 이다.

 

d. ItemSeparatorComponent

: 데이터 값들 사이의 거리를 얼마나 띄워 줄지 에 대한 함수 속성이다. 

 

e. stickyHeaderIndices{[0]}

: FlatList 내부의 Header가 스크롤에 움직여 안 보이지 않고, 화면 상단에 고정되도록 하는 속성이다.

 인수 값으로 배열을 넣는데, 맨 상단 태그를 index 0으로 간주하여 column 방향으로 태그 하나씩 인덱싱 번호가 주어진다.

만약 [1]이라고 인수를 넣으면 맨 상단 태그와 그 다음 태그까지 고정된다. 

 

f. renderItem 

: ScrollView의 Map 과 같은 녀석이다. 

여기서는 태그 가독성을 위해 내용을 함수로 만들어 따로 뺐다. 

 const renderItem = ({item}) => (
    <View>
    <Profile
    uri={item.uri}
    name={item.name}
    introduction={item.introduction}
    isMe = {false}
    />
  </View>)

renderItem의 내용이고 인수로 객체를 넣으면 함수 내용 부분에서 객체의 멤버들을 꺼내서 일을 처리 한다. 

 

g. ListHeaderComponent와 ListFooterComponent 

해당 기능에 어떤 태그 혹은 View를 넣으면 Header에 넣은 값은 맨 상단, Footer에 넣은 값은 맨 하단에 위치한다. 

 

h. showVerticalScrollIndicator 

맨 오른쪽에 화면 스크롤 시 생기는 bar를 화면에 나타낼 것이냐 아니냐를 boolean 값으로 나타낸다. 

(2) 코드 만든 흐름

a. 플랫리스트에 data 넣고, 스크롤 되도록 하기 

  return (
    <View style={styles.container}>
      <FlatList
        data={isOpened ? friendProfiles : []}
        contentContainerStyle = {{paddingHorizontal: 15,}}
        keyExtractor={(_, index) => index}
        ItemSeparatorComponent={ItemSeparatorComponent}
        stickyHeaderIndices={[0]}
        renderItem={renderItem}
        ListHeaderComponent={ListHeaderComponent}
        ListFooterComponent={ListFooterComponent}
        showsVerticalScrollIndicator ={false}
      >

      </FlatList>
      <TabBar selectedTabIdx = {selectedTabIdx} setSelectedTabIdx = {setSelectedTabIdx}/>
    </View>
  )

View 내용 다 삭제하고 FlatList로 채움. 

Footer는 FlatList 밖에 빼둠. (이건 고정하는 속성 없나봄.)

원래 FriendList 안 쓰고, 그 위에 적었던 태그들은 하나의 View로 묶어서 ListHeaderComponent의 인수로 넣음. 

  const ListHeaderComponent = () => (    
    <View style={{backgroundColor: "white"}}>
    <Header />
    <Margin height = {10}/>
    <Profile
      uri={myProfile.uri}
      name={myProfile.name}
      introduction={myProfile.introduction}
      isMe = {true}
    />
    <Margin height={15}/>
    <Division/>

    <Margin height={12}/>

    <FriendSection
      friendProfileLen = {friendProfiles.length}
      onPressArrow={onPressArrow}
      isOpened = {isOpened}
    />

    <Margin height={13}/>
  </View>)

** 참고 () => {return 표현문}은 () => 표현문과 같다. 

위의 경우는 ()로 모두 묶어서 후자의 방법을 사용한 것이다.

b. Header,Footer 부분도 보이도록 만들기 

itemseperator, HeadeComponent, footerComponent에 인수로 View 묶음 넣어서 보이게 함.

c. Header와 Footer는 스크롤에 영향 받지 않고 고정되도록 만들기

d. 토글 버튼 되도록 만들기 

화살표는 잘 움직이니까 건드릴 것 없고,

data={isOpened ? friendProfiles : []}

화살표 움직이게 하는 state를 이용해 화살표 열려 있으면 data에 인수 정상적으로 들어가게, 아니면 빈 배열을 준다.

e. 내 프로필과 친구 프로필 사진 크기, 글자 크기 서로 다르게 조절

export default ({uri, name, introduction, isMe}) => {
  
  const size = isMe ? 50 : 40;
  
  return (
    <View style={{flexDirection: "row", }}>
      <Image source={{uri: uri}} style={{width: size, height: size, borderRadius: size*0.4}}/>
      <View style={{justifyContent: "center", marginLeft: 10 }}>
        <Text style= {{fontWeight: isMe? "bold" : undefined, fontSize: isMe ? 16 :14}}>{name}</Text>
        {!!introduction && (
        <View>
        <Margin height= {isMe ? 6 : 2}/>
        <Text style = {{fontSize: isMe ? 12 : 11 , color: "grey"}}>{introduction}</Text>
        </View>
          )}
      </View>
    </View>
  )
}

Profile.js 안에 삼항 연산자를 사용한다. 일단 isMe란 속성을 만들어 만약 내 프로필이면 true, 아니면 false로 구분한다.

f. 만약 친구가 소개글 안 쓰면 이름이 가운데 오도록 만들기

      <View style={{justifyContent: "center", marginLeft: 10 }}>
        <Text style= {{fontWeight: isMe? "bold" : undefined, fontSize: isMe ? 16 :14}}>{name}</Text>
        {!!introduction && (
        <View>
        <Margin height= {isMe ? 6 : 2}/>
        <Text style = {{fontSize: isMe ? 12 : 11 , color: "grey"}}>{introduction}</Text>
        </View>
          )}

일단 메인 축이 colume인 상황에서 반대 축인 row의 값 정렬을 center로 해준다. (혼자 밖에 없으면 중앙에 오게)

!!introduction으로 써준 이유는 그냥 introduction만 썼으면, JS가 조건문으로 인식하지 못하고 introduction의 값을 그냥 출력해버리기 때문이다. ({A} 는 A란 변수의 값을 반환) 이중 부정을 통해 해당 변수가 boolean으로 사용될 것임을 알려준다. 

3. 스스로 해보기 

(1) footer를 flatList 바깥으로 빼는 것에서 문제 생겼음. 

 

전체 화면에 flex: 1 안 넣어줬을 떄는 
밑에 하단바를 flatlist 바깥으로 빼면 안 보였는데
flex:1 넣어주니 보임.