[React Native] Swiper 안에서 Array.map()으로 만든 컴포넌트가 한 View(한 페이지) 안에 뭉치는 버그

영어로 검색하실 분들을 위한 영어 제목:

React Native - Components made from array by map are put altogether in a single view. tf is the problem here

 

리액트 네이티브를 공부하면서 끄적끄적 연습용 앱을 개발하고 있는데 난관에 부딪혔다.

Swiper를 쓸 일이 있어서 react-native-swiper를 설치하고 아래와 같이 작성했는데 뷰가 이상하게 나오는 것이다.

const Component1 =()=>{

	const arr = [{id:1,data:"hi"},{id:2,data:"hello"}];
    
	return(
    	<Swiper>
            <FirstPage/>
            {arr.map(e=><MiddlePage key={e.id} value={e.data}/>)}
            <LastPage/>
        </Swiper>
    );
}

export default Component1;

이런 코드로 아래와 같은 현상이 발생했다.

Debugger로 요소를 보면 MiddlePage들이 한 View 안에 묶여있는 것을 확인할 수 있었다.

이상한 것은 <Swiper>의 자식이 arr.map()만 있으면 MiddlePage들은 기대한 대로 잘 나오는데, 이상하게 앞이나 뒤에 다른 자식이 하나라도 붙게 되면 위와 같은 문제가 발생했다는 것이다. 말로 설명하려니까 좀 어려운데, 어차피 이 글을 읽고 계신 독자분들은 이 문제로 꽤나 오래 고생하신 분들일 것이기 때문에 무슨 말인지 이해하실 거라 믿는다.

 

그런데 어떤 키워드로 검색해도 나와 같은 문제를 겪고 있는 사람이 나오지 않는 것이다 대체 왜일까 잘못 검색했던 것일까? ㅠ

 

아무튼 꽤 오래 씨름한 끝에 나는 다음과 같이 간단하게 해결할 수 있었다.

 

const Component1 =()=>{

    const arr = [{id:1,data:"hi"},{id:2,data:"hello"}];
    const swiper_children_list = arr.map(e=><MiddlePage key={e.id} value={e.data}/>);
    // swiper_children_list는 배열로 정의된다
    swiper_children_list.unshift(<FirstPage/>);
    swiper_children_list.push(<LastPage/>);
    // 해당 배열의 앞뒤로 넣고 싶은 컴포넌트들을 추가해준다
    
	return(
            <Swiper>
            	{swiper_children_list.map((e,i)=><View key={i}>{e}</View>)}
            </Swiper>
    );
}

export default Component1;

 

JSX의 좋은 점은 HTML 요소를 웬만하면 아무데나 갖다 쓸 수 있다는 것이다. 당연히 배열의 원소로도 그냥 쓸 수 있다.

이 점을 이용하여 Swiper 자식들로 구성된 새로운 배열을 만들어서 해당 배열을 swiper 안에서 map해주었더니 정상적으로 동작했다.

이렇게 간단한 해결책을 얻기 위해 나는 며칠을 고생했는가? 이렇게 간단한 해결책이 그렇게도 생각이 나지 않더냐...

아무튼간에 여러분은 쉽고 빠르게 문제를 해결하셨으면 좋겠는 마음에 포스팅을 올린다.