React Native와 React 컴포넌트 차이

기본적으로 React Native는 React와 비슷하지만

라우팅과 컴포넌트에서 차이가 있습니다

 

여기서는 컴포넌트 차이에 대해 알아보려고 합니다.

React에서는 기본적으로 컴포넌트를 만들 때 시맨틱 태그를 이용하는 반면

React Native에서는 제공되는 컴포넌트들을 사용해야 합니다

 

아래는 기본적으로 자주 사용하는 컴포넌트들입니다

 

 

div = View
div와 다르게 View에는 텍스트가 들어갈 수 없습니다

input(type="text") = TextInput

button = Button or TouchableOpacity
TouchableOpacity가 스타일링이 용이하기 때문에
보통 TouchableOpacity를 사용합니다

span = Text
모든 텍스트들은 Text 컴포넌트 안에 작성되어야 합니다

 

img = Image

ul , li = FlatList, ScrollView
리스트 형태의 경우 Flatlist를 사용합니다
둘 중 어느 것을 사용해야 하는가는 공식 문서에 이렇게 적혀 있습니다.

<ScrollView> vs <FlatList>- 어느 것을 사용할 것인가?
ScrollView는 모든 하위 구성 요소를 한 번에 렌더링하기 때문에 성능이 저하됩니다.

표시하려는 매우 긴 목록(아마도 여러 화면에 해당하는 콘텐츠)이 있다고 가정해 보세요. 
목록을 한 번에 생성하면 대부분 표시되지 않을 수 있으며 렌더링 속도가 느려지고 메모리 사용량이 증가합니다.

이런 목록을 적용하려는 곳에 FlatList가 필요합니다.
FlatList는 항목이 나타나려고 할 때 lazy하게 렌더링하고 화면 밖으로 스크롤되는 항목을 제거하여 메모리와 처리 시간을 절약합니다.
FlatList는 이외에도 여러 열, 무한 스크롤 로딩 등을 렌더링하려는 경우에도 유용합니다.

 

 

 

 

각 컴포넌트가 제공하는 기능은 공식 문서에서 확인할 수 있습니다.

https://reactnative.dev/docs/components-and-apis