Per ardua ad astra.

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

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@를 사용..