[ReactNative] FlatList 사용하기

플랫리스트를 처음 사용해봤지만, 삭제해야 할 상황이라 아쉬워서 기록.
스크롤뷰 내에서 플랫리스트를 사용하게 될 경우 경고메시지가 뜨니 map메서드로 랜더링 하는 것이 좋음.
만일 둘 다 사용해야 할 경우 워닝을 지우려면 플랫리스트를 스크롤뷰 밖으로 빼줌.

FlatList 사용한 탑 버튼

const FirstRoute = ({ txt }) => {
  const [selectedMenu, setSelectedMenu] = useState();
  const [selectedBefore, setSelectedBefore] = useState(null);

  const renderMenu = ({item}) => {
    const isSelected = selectedMenu === item.id ? true : false;

    const handleMenu = (id) => {
      if (selectedBefore === id) {
        setSelectedMenu(null);
        setSelectedBefore(null);
        return;
      }
      setSelectedMenu(id);
      setSelectedBefore(id);
    }

    return (
      <Menus
        menu={item.list_name_shorten}
        onPress={() => handleMenu(item.id)}
        isSelected={isSelected}
      />
    );
  }
  
  return (
    <View>
      <View style={styles.menuListMenu}>
        <View style={styles.menuTopbutton}>
          <FlatList
            data={menuListMockData.menuList}
            renderItem={renderMenu}
            keyExtractor={(item) => item.id}
            extraData={selectedMenu}
            numColumns={6}
          />
        </View>
          {menuListMockData.menuList.map((singleList, index) => {
              if (singleList.id !== selectedBefore && selectedBefore !== null) {
                return(null);
              } else {
              return(
                <View style={styles.menuWrap} key={`${singleList}${index}`}>
                  <Text style={styles.menuTitle}>{singleList.list_name}</Text>
                  {singleList.list_content.map((listItem, index) => {
                    return(
                      <View style={styles.singleMenuWrap} key={`${listItem}${index}`}>
                        <Image source={{uri : listItem.img_url}} style={styles.singleMenuImage} />
                        <View style={styles.singleMenuDescriptions}>
                          <Text style={styles.singleMenuTitle}>{listItem.title}</Text>
                          <Text style={styles.singleMenuOlives}>{listItem.olives} OLV</Text>
                          <Text style={styles.singleMenuDescription}>{listItem.description}</Text>
                        </View>
                      </View>
                    )
                  })}
                </View>
            )}
          })}
      </View>
    </View>
  )
}

map메서드 사용한 랜더링으로 Refactor

const FirstRoute = ({ txt }) => {
  const [selectedMenu, setSelectedMenu] = useState();
  const [selectedBefore, setSelectedBefore] = useState(null);

  const TopMenu = ({id, menu}) => {
    const isSelected = selectedMenu === id ? true : false;

    const handleMenu = (id) => {
      if (selectedBefore === id) {
        setSelectedMenu(null);
        setSelectedBefore(null);
        return;
      }
      setSelectedMenu(id);
      setSelectedBefore(id);
    }

    return (
      <TouchableOpacity onPress={() => handleMenu(id)} style={isSelected ? styles.buttonSelected : styles.button}>
        <Text style={isSelected ? styles.buttonTextSelected : styles.buttonText}>{menu}</Text>
      </TouchableOpacity>
    )
  }
  
  return (
    <View>
      <View style={styles.menuListMenu}>
        <View style={styles.menuTopbutton}>
          {menuListMockData.menuList.map((item, index) => (<TopMenu key={`${item}${index}`} id={item.id} menu={item.list_name_shorten} />))}
        </View>
          {menuListMockData.menuList.map((singleList, index) => {
              if (singleList.id !== selectedBefore && selectedBefore !== null) {
                return(null);
              } else {
              return(
                <View style={styles.menuWrap} key={`${singleList}${index}`}>
                  <Text style={styles.menuTitle}>{singleList.list_name}</Text>
                  {singleList.list_content.map((listItem, index) => {
                    return(
                      <View style={styles.singleMenuWrap} key={`${listItem}${index}`}>
                        <Image source={{uri : listItem.img_url}} style={styles.singleMenuImage} />
                        <View style={styles.singleMenuDescriptions}>
                          <Text style={styles.singleMenuTitle}>{listItem.title}</Text>
                          <Text style={styles.singleMenuOlives}>{listItem.olives} OLV</Text>
                          <Text style={styles.singleMenuDescription}>{listItem.description}</Text>
                        </View>
                      </View>
                    )
                  })}
                </View>
            )}
          })}
      </View>
    </View>
  )
}