1. 에러 상황
FlatList data에 mobx로 받아온 배열을 넣어주면 Out of bounds read 에러가 발생합니다.
2. 에러 원인
이유를 찾아보다가 잘 정리된 글을 발견했습니다.
FlatList는 배열에 저장된 값들을 읽어서 렌더링하는 역할을 하는데요. 위 에러는 FlatList가 읽을 수 없는 형태의 배열이 들어왔을 때 나타납니다.
mobx에 저장된 배열은 일반 형태의 배열이 아니라고 합니다.
@observable users: Array<User> = []
//또는
users: Array<User> = observable([])위 2개의 형태 중 하나로 정의되기 때문에 FlatList가 읽을 수 없다고 합니다.
3. 해결 방법
mobx의 배열에 .slice()를 붙혀주면 됩니다.
// 에러 발생
<FlatList
data={data}
>
// 해결 방법
<FlatList
data={data.slice()}
>
.slice()는 원본 배열을 복사해서 반환해주는 함수입니다.
.slice(1,4) 를 하면 배열의 1번요소부터 4번요소까지를 새로운 배열로 만들어서 반환해줍니다.
괄호 안에 아무런 파라미터를 넣지 않으면 모든 배열요소를 그대로 복사해서 반환해주죠.
.slice()에 대한 더 자세한 설명은 여기를 참고해주세요!
slice()를 통해 observable 배열을 일반 배열로 바꾸어서 해결할 수 있었습니다.
다만, 매번 slice()를 사용해서 FlatList를 렌더링하는 것은 성능에 별로 좋지 않다고 합니다.
다른 방법을 알고 계신다면 댓글로 알려주세요 :)