React Native 1. 코어 컴포넌트 (View, Text, TextInput, Button , ScrollView)

들어가며...

회사에서 React Native를 처음 배우기 시작했다. React랑 거의 유사한 개발 경험을 제공한다고 하더니.. 생각보단 다르다!

일단 태그부터 다르다. div라던가 styled-components와 작별을 하게 됐다. (RN환경에서도 styled-component나 emotion을 사용할수는 있다고는 하나 사수님께서 말하길 모바일에서 별로 성능이 좋진 않다고 한다.) 사실 '태그'라고 부르는 것조차 조금 잘못된 느낌이다. React Native 공식문서에 보면 코어 컴포넌트라고 부른다고 한다.

 

리액트 네이티브에서 스타일링 하는 법 & 코어 컴포넌트의 기본 속성

리액트 네이티브는 css파일을 쓰지 않는다. 웹이 아니기 때문! 기술 면접 때 계속 말하던 DOM 파싱하고 CSSOM 파싱하고 렌더트리 만들고... 이 브라우저 렌더링 과정과 다르게 모바일 네이티브 환경에서 렌더된다는 것을 기억해야된다.

 

그리고 코어 컴포넌트들은 기본적으로 flex속성을 가지고 있다. (네이티브 환경 자체가 flex 기준으로 맞춰져 있나? 나중에 더 찾아봐야겠다...) 그리고 리액트 네이티브가 기본적으로 제공하는 모듈인 styleSheet를 import하여 이곳에 스타일 객체를 선언한다.

 

Styled-components의 Theme객체를 작성하는 것과 비슷하다고 생각하면 된다. 그러나 차이점은 Theme 객체는 ThemeProvider를 통해 전역적으로 작동하지만 StyleSheet는 각 페이지마다 적는 것이 컨벤션인거 같다.

 

1. <View></View>

View 컴포넌트는 UI를 구성하는 가장 기본적인 빌딩 블록 중 하나이다. HTML의 div와 유사하며, UI의 구성 요소를 그룹화하고 스타일링하기 위해 사용된다.

 

2. <Text></Text>

Text 컴포넌트는 텍스트를 표시하기 위한 기본적인 컴포넌트이다. HTML의 span 역할을 한다고 보면 된다. 리액트 네이티브에서는 특이하게도 Text 컴포넌트 없이 문자를 출력하면 에러가 뜬다.

 

3. <TextInput></TextInput>

TextInput은 사용자로부터 텍스트를 입력받는 데 사용되는 구성 요소이다. HTML의 input이라고 보면 된다. 이를 사용하여 사용자에게 텍스트 입력 상자를 제공하고, 사용자가 입력한 텍스트를 읽거나 처리할 수 있다. 일반적으로 폼 입력, 검색 기능, 채팅 앱 등에서 사용된다.

TextInput 구성 요소는 다양한 속성과 이벤트를 가지고 있다.

1. value: TextInput에 표시되는 텍스트 값을 설정하거나 가져올 수 있다.
2. onChangeText: 텍스트 입력이 변경될 때 호출되는 콜백 함수를 지정할 수 있다.
3. placeholder: 사용자가 아무 것도 입력하지 않았을 때 나타나는 플레이스홀더 텍스트를 설정할 수 있다.
4. onSubmitEditing: 텍스트 입력이 완료되었을 때 호출되는 콜백 함수를 지정할 수 있다.
5. keyboardType: 키보드의 유형을 지정할 수 있습니다. 예를 들어, 숫자만 입력받을 수 있는 키패드, 이메일 입력용 키패드 등을 설정할 수 있다.

 

4. <Button/>

HTML의 버튼 컴포넌트와 용도는 동일하다. 그러나 onClick이 아니라 onPress 속성을 사용하며, onPressDown, onPressUp등으로 세부 조작을 할 수 있다. 그리고 태그 안에 텍스트를 넣는게 아니라, title 속성으로 버튼 이름을 설정할 수 있다.

1. title: 버튼에 표시되는 텍스트를 지정한다.
2. onPress: 버튼이 눌렸을 때 호출되는 콜백 함수를 지정한다.

import React from 'react';
import { View, Button, Alert } from 'react-native';

const MyButton = () => {
  const onPressButton = () => {
    Alert.alert('Button Pressed!');
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button
        title="Press Me"
        onPress={onPressButton}
        color="#841584" // iOS에서만 적용되는 색상 속성
        disabled={false} // 버튼 활성화 상태
        accessibilityLabel="Press this button" // 접근성 레이블
        testID="myButton" // 테스트 ID
      />
    </View>
  );
};

export default MyButton;

 

 

5. <ScrollView></ScrollView>

ScrollView는 리액트 네이티브에서 사용자에게 스크롤 가능한 컨텐츠를 제공하는 데 사용되는 컴포넌트이다. 화면에 표시할 수 있는 컨텐츠의 크기가 화면을 벗어날 경우 사용자가 스크롤하여 해당 컨텐츠를 볼 수 있도록 한다.

 

1. contentContainerStyle: 스크롤뷰 내의 컨텐츠 컨테이너의 스타일을 지정한다. 그냥 컨텐츠 자체에 스타일을 줘도 될거 같은데, ScrollView 자체에 주는 방법이 있나보다.
2. horizontal: 수평 스크롤을 사용할지 여부를 결정한다. 기본값은 false.
3. showsHorizontalScrollIndicator: 수평 스크롤바를 표시할지 여부를 결정한다. 기본값은 true.
4. showsVerticalScrollIndicator: 수직 스크롤바를 표시할지 여부를 결정한다. 기본값은 true.
5. onScroll: 스크롤이 발생할 때 호출되는 콜백 함수를 설정.
6. scrollEventThrottle: onScroll 이벤트의 호출 빈도를 설정한다. 기본값은 16으로, 16ms마다 한 번씩 호출.
7. pagingEnabled: 페이지 단위로 스크롤을 할지 여부를 결정한다. 기본값은 false.

 

*그리고 ScrollView를 사용해도 스크롤이 안 되는 이슈가 발생할 때 touchableWithoutFeedback같은 태그로 전체를 감쌌는지 의심해보는 것도 좋다. 터치 자체를 touchableWithoutFeedback이 가져가서 제대로 스크롤이 안 되는듯??