[React Native] React native 와 React 의 차이 / 태그(component, element) 목록

react native 는 react 기반이기는 하지만 사용하는 태그(컴포넌트, 요소) 가 살짝 다르다.

react 에서는 html 태그를 그대로 이용해도 괜찮은데 react native 는 자체 제공하는 컴포넌트를 사용해야 한다.

 

또 스타일 적용하는 법도 다르다.

html, react 는 부모에게 스타일을 적용해주면 자식의 텍스트들에도 스타일이 적용되는데, react native 는 스타일을 적용할 데에 직접 style 을 넣어줘야 한다. 

 

프로젝트 생성 시 볼 수 있는 컴포넌트들을 정리해보면 다음과 같다.

component (tag)	description
View	div 랑 같음
Text	텍스트에 스타일 주는 용도
SafeAreaView	아이폰의 경우 상단의 m 자 모양까지 화면이 꽉 차는 경우가 있는데, 그런 경우 화면이 잘려 보인다. View 대신 이 컴포넌트를 사용하면 해결된다.
ScrollView	스크롤 되는 View
Header	Appbar, Toolbar. 상단에 앱 이름 있고 공간차지하는 것 타이틀 바..

 

더 다양한 컴포넌트들이 있는데, 여기서 다 다루기는 어렵고 리액트 네이티브 공식 문서를 참조해가며 개발하면 된다.

 

스타일은 별도로 css 를 만들지 않고 StyleSheet.create 로 만든 스타일을 변수에 할당하여 style 속성에 넣어준다.

react native 에서 정렬은 flex 를 주로 이용하므로 잘 알아두자.

참고로 flexDirection 은 웹에서는 row(가로) 정렬이 기본이지만, react-native 에서는 column(세로) 정렬이 기본이다.