[ReactNative] 공식 문서 보기 (1) - 기초

 

ReactNative를 배우며, 기존 React와 사용방법이 약간 동일한 것 같지만, Html 요소가 아닌 <View>나 <Text>와 같은 ReactNative만의 독자적인 태그를 사용하는 것을 보았다.

 

그래서 다시 처음으로 돌아가, 공식문서의 내용을 간단히 정리해 볼 것이다. 

 

ReactNative 공식문서는 다음과 같은 링크에서 볼 수 있다.

나는 간단히 내가 기억해야 될 부분만 순차적으로 정리해 보고자 한다.

https://reactnative.dev/docs/getting-started

Introduction · React Native

 

---

ReactNative?

 

ReactNative는 React와 앱 플랫폼의 기본 기능을 사용하여 Android 및 IOS 두 가지 플랫폼 모두 사용 가능하며, 애플리케이션을 빌드하기 위한 오픈 소스 프레임 워크이다. 

 

 

View

ReactNative에서의 View는 Android 및 IOS 개발에서 UI의 기본 블록이다. 텍스트, 이미지나 사용자입력에 대한 표시를 할 수 있는 화면의 작은 직사각형 요소이다.

한 줄의 텍스트 및 버튼과 같은 앱의 시각적 요소도 일종의 뷰이다.

 

 

텍스트 핸들링(Text Input Handling)

 

ReactNative는 텍스트의 대한 입력을 TextInput을 사용하여 처리한다. 내용이 변경될 때는 onChangeText 함수가 실행되고 텍스트가 제출될 때는 onSubmitEditing 이 있다.

 

아래 예제와 같은 형태로 사용한다.

React에서의 Input태그의 onChange함수를 사용할 때처럼 사용하는 것과 동일하다.

import React, { useState } from 'react';
import { Text, TextInput, View } from 'react-native';

const textHandle = () => {
  const [text, setText] = useState('');
  return (
    <View style={{padding: 10}}>
      <TextInput
        placeholder="입력해주세요"
        onChangeText={newText => setText(newText)}
        defaultValue={text}
      />
     </View>
     ) 
     
     /...

 

 

ScrollView

ScrollView는 세로로 스크롤 할 수 있게 도와주는 컨테이너이다.

화면에 항목이 많다면 모바일 화면에서의 스크롤을 도와주도록 한다.

모든 요소가 한번에 렌더링 된다.

 

const App = () => (
  <ScrollView>
    <Text style={{ fontSize: 96 }}>Scroll me plz</Text>
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Text style={{ fontSize: 96 }}>If you like</Text>
   </ScrollView>
   );

 

다음과 같이 내용에 들어갈 태그들을 감싸서 사용하게 된다.

 

 

리스트 만들기

 

ReactNative에서의 리스트를 만들 때는 FlatList 또는 SectionList를 사용한다.

 

FlatList를 사용할 때는 유사한 데이터 목록이 늘어날 때 사용한다. 

내가 메모장 만들기에 사용했을 때처럼 (아이디, 텍스트) 유사한 데이터 목록을 표시할 때 유리하고, ScrollView와 달리 현재 표시되는 화면의 영역만 렌더링 된다.

[이전 글]

2022.10.23 - [개발/ReactNative] - [ReactNative] expo 메모장 앱 만들기 (3)

 

 

const FlatListBasics = () => {
  return (
    <View style={styles.container}>
      <FlatList
        data={[
          {key: 'Devin'},
          {key: 'Dan'},
          {key: 'Dominic'},
          {key: 'Jackson'},
          {key: 'James'},
          {key: 'Joel'},
          {key: 'John'},
          {key: 'Jillian'},
          {key: 'Jimmy'},
          {key: 'Julie'},
        ]}
        renderItem={({item}) => <Text style={styles.item}>{item.key}</Text>}
      />
    </View>
  );
}

다음과 같이 Data형식과 렌더링 될 방식(renderItem) 속성을 사용해 렌더링 시켜준다.

 

 

SectionList는 다음 사진과 같이 논리적으로 분할된 세트를 보여줄 때 사용하는 것이 좋다.

 

const SectionListBasics = () => {
    return (
      <View style={styles.container}>
        <SectionList
          sections={[
            {title: 'D', data: ['Devin', 'Dan', 'Dominic']},
            {title: 'J', data: ['Jackson', 'James', 'Jillian', 'Jimmy', 'Joel', 'John', 'Julie']},
          ]}
          renderItem={({item}) => <Text style={styles.item}>{item}</Text>}
          renderSectionHeader={({section}) => <Text style={styles.sectionHeader}>{section.title}</Text>}
          keyExtractor={(item, index) => `basicListEntry-${item.title}`}
        />
      </View>
    );
}

위의 예제에서 SectionList의 속성을 보면, 다음과 같다.

- renderItem : react element를 반환하며, 필수적으로 기본적인 렌더러이다.

- renderSectionHeader : 각 섹션에 상단에 렌더링 된다. 위의 예제에서는 타이틀이 상단에 고정되는 것이다.

- keyExtractor : 지정된 인덱스에서 항목에 대한 고유키를 추출하는 데 사용한다. 키는 캐싱에 사용된다. 

 

 

간단히 사용하는 기초적인 것들과 React와 동일하게 사용하는 부분은 정리하지 않았다. 아직 갈길이 멀지만 꾸준히 정리해보며, 쌓아가야겠다.