갤러리 앱 클론코딩 - 디바이스마다 제각각인 가로 길이 대응

<개요>

해당 앱을 사용하는 장치마다 가로길이가 천차만별이다. 

그런데 Flatlist의 columnNum을 3으로만 고정해놓으면, 어떤 화면에서는 행 당 차지하는 사진의 크기가 클 것이고, 어떤 화면에서는 작을 것이다. 

우리는 디바이스의 화면 크기마다 한 행에 표시되는 사진 수를 다르게 해서, 사진 하나 하나의 크기가 너무 커지거나 작아지지 않도록 해볼 것이다.

1.로직

2. 코드리뷰

3. 새롭게 알게 된 것

(1) Math.floor는 인수의 내림 값을 반환한다. 

 

(2) Flatlist의 onLayout 

FlatList의 너비를 알고 싶을 때 onLayOut 속성에서 해당 함수를 이용한다. e.nativeEvent.layout.width를 찍어보면 flatlist의 너비가 나온다. 

 

(3) 이벤트 핸들러에 대하여 짤막히 

이벤트 핸들러는 
사건 발생(마우스가 버튼에 닿인 것)
사건에 대한 동작 (버튼이 파란색으로 변한다.)
이 두 개가 합쳐진 것을 말한다.