[클라우딩 어플리케이션 엔지니어링 TIL] 240315 - React Native 기본 컴포넌트

Intro

---

오늘은 React Native에서 자주 사용하는 기본 컴포넌트를 알아보고 코드에 직접 적용해보는 실습 강의를 들었다.

 

 

 

오늘 학습한 내용

---

View, Text

가장 많이 쓰이는 기본 컴포넌트는 View, Text이다.

👩‍💻 View는 html의 div 태그와 비슷한 역할을 한다. 무조건 flex와 함께 쓰여 alignItems, justifyContent로 정렬을 할 수 있다.

 

Text는 기본 글자 컴포넌트로 글자를 넣으려면 Text를 사용해야 한다.

👩‍💻 allowFontScaling={false}로 설정하면 개인 디바이스에서 글씨를 크게 했을 때 같이 커지는 것을 막는 설정을 할 수 있다. (default=true)

 

<Text ellipsizeMode="tail" numberOfLines={1} allowFontScaling={false}
  style={{color: '#fff', fontSize: 24, fontWeight: 'bold'}}>
    React Native {test}React Native {test}React Native {test}React Native{' '}
	  {test}React Native {test}React Native {test}React Native {test}React
    Native {test}React Native {test}
</Text>

 

Text에서 ellipsizeMode 속성으로 글자가 길어졌을 때 생략에 대한 모드를 선택할 수 있고, numberOfLines로 텍스트 줄 길이를 설정할 수 있다.

 

 

ScrollView

• View를 기본적으로 상속받아 View와 관련된 기능을 모두 사용 가능하다.
• horizontal로 가로 스크롤 설정이 가능하다.
• showVerticalScrollIndicator=false, showHorizontalScrollIndicator=false로 스크롤이 보이는 걸 없앨 수 있다.

 

StyleSheet

React Native에서 추천하는 스타일링 방법이다.

const styles = StyleSheet.create({
  basicWrapper: {
    height: 2000, flexDirection: 'row', justifyContent: 'center', alignItems: 'flex-start',
})

 

컴포넌트의 style 속성에 styles.(스타일 명)로 스타일을 적용할 수 있다.

 

SafeAreaView

• 아이폰의 상태 표시창이라 ios에서 사용 가능하다.
• 안드로이드에선 자동으로 무시된다.
• iOS V11 이상부터 사용 가능하다.

 

TouchableOpacity

• 터치할 때 불투명하게 변하면서 터치됨을 알 수 있는 컴포넌트이다.
• onPress 속성으로 터치했을 때 동작을 콜백함수로 넣어준다.

<TouchableOpacity onPress={() => Alert.alert('안녕하세요')}
   style={{
     flex: 1,
     alignItems: 'flex-end',
     backgroundColor: 'beige',
}}>
  <Text style={{fontSize: 24}}>설정</Text>
</TouchableOpacity>

• activeOpacity로 투명도 설정이 가능하다.
• onLongPress 속성은 터치를 길게 눌렀을 때 동작하는 함수를 설정한다.
• React Native에서 Button 컴포넌트보다는 TouchableOpacity를 주로 사용한다.

 

TextInput

• 사용자가 입력할 수 있는 입력창 컴포넌트
• width, height를 필수로 줘야 한다.
• KeyboardAvoidingView 컴포넌트를 함께 써서 키보드 조정도 할 수 있다.

 

Image

 <Image source={leftArrow} style={styles.backButton} />

 

source에 img 파일이나 url을 불러온다.

 

 

 

 

 

마무리

---

본격적으로 React Native를 다뤄봤는데 만들어져 있는 컴포넌트를 가지고 블럭처럼 조립하는 느낌이라 재밌었다.

디자인이 부족하더라도 그럴듯한 앱을 만들 수 있을 것 같다.