✏️ 무엇을 배웠나
1. FlatList
React Native에서 ScrollView는 중요한 역할을 해주는데, 이 컴포넌트 안에 데이터 리스트가 많을 수록 리소스를 많이 잡아먹고 성능이 저하되는 문제가 있음. 왜냐하면 당장 화면에 보이지 않는 데이터들도 모두 불러오기 때문임. FlatList는 이 문제를 해결할 수 있는 대체재다. UI로 무한 스크롤을 사용할 때 유용할 듯.
실제로 리팩토링을 해보니 새로고침할 때 속도가 좀 더 빠릿하고 쫀득해졌다는 느낌을 받았음.
2. Dimension
레이아웃 잡을 때 width랑 height를 써서 잡아왔는데, 반응형이 아니라 석연치 않은 느낌이 있었음. Dimension을 사용하면 모바일 기기의 크기를 자동으로 가져올 수 있다! width와 height를 상수화시켜서 가지고 있을 수 있어서 flex와 함께 사용해 레이아웃을 잡을 때 도움이 됐다. 좀 더 그럴 듯 해졌음.
3. PagingEnabled
수평 ScrollView로 콘텐츠를 볼 때 페이지를 넘기듯이 탄력성 있게 만들어주는 ScrollView 속성임. 나중에 또 써먹으려고 기록해 둠.
4. map 돌릴 때 TypeError 일반적인 해결 방법
기존에 fetch API로 사용했던 서버 통신 코드를 리액트 쿼리 useQuery로 받아온 데이터를 썼더니 에러가 뜸.
map을 돌리는데 에러가 발생. TypeError는 타입이 잘못되었을 때 나오는 거니까 분명 nowPlayingData가 배열이 아닐 것으로 예상했다. 역시나 로그를 찍어보니 한 뎁스 더 들어가야 했음.
내가 원하는 건 results에 있으니까 nowPlayingData.results.map으로 바꿔주니 문제 없이 돌어갔다.
타입 에러가 뜰 때는 내가 넣은 값이 내가 사용하는 함수나 메서드에 맞는 타입인지 확인하면 빠르게 해결할 수 있다는 걸을 깨달아버렸다. 후후. 구글링 안 하고 에러 해결 한 거 처음이라 셀프 대견함.
그리고 리액트 쿼리가 확실히 서버 통신 코드 양을 확 줄여주더라. thunk 썼을 때보다 더 심플하기도 했고 무엇보다 리액트 쿼리라는 이름처럼 검색해서 가져오는 느낌이 직관적이라 느꼈음.
