React Native | Component

Component

리액트 네이티브는 스타일드 컴포넌트와 비슷합니다.
스타일드 컴포넌트를 사용해 보신분은 아래 코드가 익숙하실 거에요.

const View = styled.div ` height: 100px;`

이를 아래 코드처럼 사용 하는 거죠.
<div className="View"><div/> //기존에 사용하던 방식
<View></View> //스타일드 컴포넌트를 사용한 방식

Text, Button, TouchableOpacity 등 ReacNative는 기본적으로 제공하는 컴포넌트가 있어요. 이를 import해서 사용 하는 방식인거죠.
그 이외에는 기존의 React.js와 큰 차이점이 없어요.
즉, ReactNative를 잘하고 싶으면... React를 잘하면 된다는 결론인거죠... React를 잘하고 싶으면...JavaScript를 잘해야 하고... 으악!!!

Component의 종류

1. View: 화면에 보여지는 부분? 이라고 생각하시면 되는데, 기존에 div라고 생각하시면 될거에요.
2. Text: 말 그대로 글자를 입력할 때 사용해요.

	<View> 
    		<Text>Hello World</Text>
      	</View>

3. TouchableOpacity: Button과 똑같은 기능을 갖고 있어요. Button과의 차이점은 Button은 기본으로 제공하는 레이아웃이 있고, 쓸 때마다 title을 써주어야 해요. 쓸 때마다 번거롭죠. 뭐, 개인취향이기 때문에 원하는 것을 사용하면 되요.
4. 그 이외에도 굉장히 많은 컴포넌트가 있지만... 필요할 때마다, 공식 홈페이지가 방문을 해서 사용하는 방법을 확인해 보면 되요. 리액트네이티브 공식 홈페이지와 커뮤니티 등을 확인해 보시면 컴포넌트의 종류와 사용법을 확인할 수 있어요~

마무리

ReacNative 굉장히 재미있습니다. 혹, React를 하실 줄 알면, ReactNative는 쉽게 접근 할 수 있을 거에요.