Per ardua ad astra.

React Native ScrollView

ScrollView들어가며리액트 네이티브(React Native)의 ScrollView 컴포넌트에 대해 간단하게 정리해본다. ScrollView개념스크롤 가능한 컨테이너로, 자식 컴포넌트가 화면의 크기를 넘어설 때 스크롤(Scroll)을 통해 볼 수 있게 해주는 컴포넌트자식 요소들이 많거나 화면보다 커질 경우, 사용자가 스크롤해서 볼 수 있도록 만들어준다. 주요 속성속성타입설명horizontalbooleantrue로 설정 시, 가로 스크롤 가능 (기본 : 세로)contentContainerStylestyle내부 콘텐츠 전체에 적용할 스타일showsVerticalScrollIndicatorboolean세로 스크롤바 표시 여부showsHorizontalScrollIndicato..

React Native KeyboardAvoidingView

KeyboardAvoidingView들어가며리액트 네이티브(React Native)의 KeyboardAvoidingView 컴포넌트에 대해 간단히 정리해 본다. KeyboardAvoidingView개념키보드가 화면에 나타날 때 입력 필드 등의 UI가 가려지는 문제를 해결하기 위해 사용되는 컴포넌트키보드 레이아웃이 표시될 때, 자식 요소를 위로 올려서 입력창을 가리지 않도록 해준다.Android에서는 기본적으로 잘 처리되나, iOS에서는 그렇지 않아 이 컴포넌트를 이용하면 유용하다. 주요 속성behavior키보드가 나타날 때의 동작 방식을 조절할 수 있다.플랫폼에 따라 동작이 다를 수 있기 때문에 Platform.OS를 통해 조건 분기해서 쓰는 것이 일반적이다.옵션설명padding키보드의 높이만..

FlatList들어가며리액트 네이티브(React Native)의 FlatList 컴포넌트에 대해 정리해본다. FlatList개념효율적으로 대량의 스크롤 가능한 항목을 렌더링하기 위해 사용되는 컴포넌트최적화된 가상 스크롤링 기능을 제공하여 성능 문제를 줄이고, 스크롤 시 필요한 항목만 렌더링한다.ScrollView 컴포넌트와의 차이점 주요 속성속성설명data- 렌더링할 데이터 배열(Array)을 전달- 배열의 각 요소는 렌더링될 항목의 데이터renderItem- 데이터를 어떻게 렌더링할지 정의하는 함수- 매개변수로 { item, index } 형태의 객체를 받는다.keyExtractor- 각 항목의 고유 키를 반환하는 함수- 기본적으로 item.key 또는 item.id를 사용..