[기업협업 2022/01/28]FlatList 응용

Fixed Area in App

web개발을 하게 되면, 어느 특정 영역을 화면에 fix 시키는 것은 특별한 작업이 필요합니다. position : absolute; 속성을 지정한다던지, 등.
그러나 app에서는 모든 영역이 fix되어있으며, ScrollView 나 FlatList등의 속성을 주어야만 스크롤링이 가능해 집니다.
따라서 원하는 부분에만 ScrollView, 혹은 FlatList 컴포넌트로 감싸두면, 해당 영역의 외부는 fixed된 상태로 존재하게 됩니다.

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.fixedArea}>
        <GoBackBtn navigation={navigation} title={"뒤로가기"} />
      </View>
        <FlatList
          data={data}
          renderItem={renderItem}
          keyExtractor={item => item.id}
          style={styles.itemsArea}
          numColumns={COLUMN_NUMBER}/>
    </SafeAreaView>

위의 경우에 <View>로 감싸여진 <GoBackBtn>은 화면에 계속 fix된 상태로 고정됩니다.

❌ Error
화면을 그릴 때, <ScrollView>내부에 <FlatList>를 네스팅 하지 마세요! 역전앞과 같은 에러입니다.

numColumns and Blank

FlatList에는 numColumns 라는 props가 존재합니다. 이 글에서 제가 FlatList를 map에 UI를 가미한 것 같다고 말씀드린 이유입니다.

without numColumns

numColumns없이 FlatList를 사용하면 아래와 같습니다.

item들은 가로로 한 줄을 꽉 차지하게 됩니다.

with numColumns

numColumns에 3을 주게 되면 아래처럼 세개의 기둥 영역을 가지고 반복하게 됩니다.

스타일시트를 조금만 수정하면 flex와 grid 없이 바둑판 모양 정렬도 가능합니다.

with fillBlank()

위의 이미지처럼 아이템의 배열이 3(=numColumns)의 배수가 아닌 경우, 화면에 빈 공백이 생기는데요. 해당 부분을 없애고 싶다면 아래와 같은 간단한 함수를 추가하여, useEffect에 걸어주면 됩니다.

const COLUMN_NUMBER = 3
const fillBlank = (DATA) => {
  const getNeededBlank = () => {
    if(DATA.length % COLUMN_NUMBER === 0) {
      return 0;
    } else {
      return COLUMN_NUMBER - (DATA.length % COLUMN_NUMBER);
    }
  }
  const NEEDED_BLANK = getNeededBlank()  

  let n=0;
  while(n < NEEDED_BLANK){
    n++;
    DATA.push({'id': `blank${n}`}) 
  }
  
  return DATA;
}

//in useState Area
  const [data, setData] = useState([]);
  
//in useEffect Area

  useEffect(()=>{
    fillBlank(DATA);
    setData(DATA);
  }, [])

//in FlatList
      <FlatList
        data={data}
        renderItem={renderItem}
        keyExtractor={(item) => item.id}
        numColumns={COLUMN_NUMBER}
      />

실행 화면은 다음과 같습니다.

추가되는 아이템들의 아이디는 blankn 과 같은 꼴이어서, 아이디에 blank라는 글자가 있는지 여부로 item의 style을 다양하게 적용할 수도 있습니다.