React Native 태그 종류

React Native 태크 종류에 대해서 알아보자😀

React Native에서 사용하는 UI 컴포넌트들은 기본적으로 import를 통해서 받아와야 한다.

import {
  Image,
  Text,
  TextInput,
  ScrollView,
  View,
} from "react-native";

위쪽 코드를 살펴보면 일반적으로 React에서는 못보던 것들이 있다.
5종류의 코드를 하나씩 살펴보자

View

div 태그의 역할을 한다.
기본적으로 flex box 속성을 가지고 있다.

Text

p 태그 역할을 한다.
문자열

Image

기존: <img src='경로' />
React native: <Image source = {{uri:"경로"}} or {require("경로")}

TextInput

input 속성을 가지고 있다.
onChangeText, onPress, value 등

ScrollView

기본적으로 페이지가 오버 됐을때 브라우저와 달리 스크롤이 생기지 않기 때문에 scrollView 태그로 감싸줘야한다.

추가적으로

KeyboardAvoidingView

키보드 창이 나와서 키보드를 입력할때 자동으로 패딩을 줘서 가려지지 않게 해준다.

Pressable

onpress의 다양한 속성들을 사용하게 해줌
<onPress, onLongPress, onPressIn, onPressOut> 등등