React Native FlatList 새로고침 하는 방법

기존에 Scrollable하고, Refresh가 가능한 리스트가 필요했는데

찾아보다가 FlatList가 적합하다고 판단했다.

(참고로 ListView는 Deprecated 됐다고 한다)

써보니까 상당히 유용하고 편하다.

사용자가 딥하게 건들필요 없이 속성 인자만 잘 맞춰주면 알아서 잘 돌아간다.

사용법이 궁금하다면 아래 블로그 참고

(https://www.vobour.com/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%84%A4%EC%9D%B4%ED%8B%B0%EB%B8%8C-flatlist-react-native-flatlist)

튼 FlatList로 작업을 하고 있었는데 새로고침이 필요한 상황이 생겼다.

예를 들어 댓글을 지우고 새로고침을 하면 그 내용이 반영이 되어야 하는데 잘 되지 않았다.

나같은 경우 아래의 구조로 작업중이다.

글 목록 -> 글내용+댓글 목록

최초 글 목록을 받아올 때 댓글에 관한 정보도 같이 받아오고 댓글보기를 눌렀을 때

글의 내용과 댓글을 props로 넘겨준다.

댓글보기를 눌렀을 때 글 내용과 댓글 목록을 다시 받아오기까지 조금이라도 시간이 걸리기 때문에

해당 시간을 줄여주고 서버에 정보를 재요청함으로써 생기는 리소스를 줄이기 위함이다.

그래서 댓글부분만 보자면 initComment를 props로 넘겨주고 해당 정보 랜더링 후

새로고침을 했을때만 다시 댓글목록을 서버로 요청, commentList에 담아주고 또 그 정보를 랜더링 해주는 방식인데

여기서 문제가 발생했다.

새로고침을 하면 commentList에 댓글은 정상적으로 담기는데 랜더링이 제대로 되지 않았던 것이다.

랜더링 부분 조건문은 대략 아래와 같다.

if(initComment && commentList.length == 0) {

...

} else {

...

}

분명 정보가 담기면 length가 0이 아니므로 else문으로 들어가야 하는데 들어가지 않았다.

살펴보니 FlatList에 extraData라는 속성을 줘야 한다고 나와있었다.

따라서 위와 같이 extraData 속성에 추가적으로 랜더링해주고 싶은 것을 박아두면 해결된다.