FlatList를 사용하다보면 가끔 저런 경고문이 뜨는 것을 볼 수 있다.
해석해보면... 리액트처럼 가상돔 형태로 렌더되는 경우 리스트 컴포넌트들은 중첩이 되어서는 안된다는 것인데... 왜 중첩이 된걸까??

: 모른다면 이런 경고문을 마주하게 될 것이다.

1. 생각해보자.

: 빨간글보단 낫지만 노란글도 거슬린다. 없애야한다.
중첩... 중첩... 스크롤뷰 중첩이라...

  return (
    <View>
      <ScrollView
        showsVerticalScrollIndicator={false}
        showsHorizontalScrollIndicator={false}>
        <Swiper data={slideData} />
        <FlatList />
      </ScrollView>
    </View>
  );
};

• 이것 저것 테스트 해본 결과 위의 코드에서 ScrollView 와 FlatList가 중첩된다는 의미인 것 같았다.
• 둘다 스크롤을 내릴 수 있는 기능을 가지고 있다.
• 문득 떠오른 생각이... 가끔 스크롤을 내리다가 내부에 또 스크롤이 있는 컴포넌트를 만나면 그 내부 컴포넌트의 가장 아랫부분까지 내려줘야 바깥쪽 스크롤을 사용 할 수 있었다.
  그때 불편했던 기억이 있다... 이것도 그 문제를 경고하는 것이 아닐까?

2. 실험해보자

1) 어떤 경우에 발생할까?

horizontal={true}
horizontal={false}

• 두개의 FlatList를 만들고 하나는 세로형, 다른 하나는 가로형으로 만들어보았다.
• 이 중 경고문은 세로형에서만 발견되었다.
• ScrollView가 세로형이기 때문에 위에서 세운 가설이 확실해졌다.

2) 스크롤을 없애면 해결되지 않을까?

(1) 스크롤바만 없애보자

showsVerticalScrollIndicator={false}
showsHorizontalScrollIndicator={false}>

• 보여지는 스크롤바를 없애는 것으로는 경고문이 사라지지 않았다.
• 스크롤바가 사라져도 여전히 스크롤 중첩은 여전할 것이니 이것도 가설을 증명할 수 있다.

(2) FlatList에 스크롤이 생기지 않을만큼 hight값을 키워보자

const Container = styled(View)`
  ${Mixin.flexSet('center', 'center', 'column')};
  width: 390px;
  height: 2000px;
`;

• FlatList를 감싸고 있는 컨테이너의 높이를 엄청 크게 해봐도 역시나 경고문은 생긴다.
• Item 들이 컨테이너에 넘치지 않도록 중앙으로 위치해주어도 결과는 동일했다.
  (Mixin 코드는 다른 곳에 위치해 있으니 무엇을 시도했는지만 참고하자)
• 결국은 ScrollView 와 세로형FlatList가 있다면 해당 경고문은 무조건 생긴다는 의미이다.

3. 해결해보자.

1) 형태는 유지시키고 경고문은 제거

: 이것은 구글링을 통해 한가지 좋은 방법을 찾을 수 있었다.

  return (
    <FlatList
      ListHeaderComponent={
      <>
        <CoverPhoto src={images[0]} />
        <Title>Welcome</Title>
        <Text>Take a look at the list of recipes below:</Text>
      </>}
      data={recipes}
      renderItem={renderItem}
      ListFooterComponent={
        <Footer/>
      }/>
    )

• ScrollView를 없애고 FlatList에 모든 부분을 다 넣는 것이다.
• FlatList에는 ListHeaderComponent, ListFooterComponent라는 atr이 존재한다.
• 이것을 이용하여 해더, 바디, 푸터로 구분지어 데이터를 넣는 것이다.
• 기존에 내가 List에 담았던 것은 전부 바디에 넣어준다.

2) 나는 ScrollView도 쓰고 싶고 FlatList도 쓰고 싶다.

: 그리고 경고문도 안보고 싶다!!!

• 이부분 연구중이다. 시간 날때 또 테스트 해봐야지...
• 아는분 댓글 부탁요.