[ReactNative] Introduction - 2

개발환경세팅을 마치고 미리 준비할것들을 확인해보았다.당연히 자바스크립트 지식이 중요한데 mdn문서를 다시 한번 훑어봤다.https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript

A re-introduction to JavaScript (JS tutorial) - JavaScript | MDN

 

리액트에서 컴포넌트를 만드는 방법은 클래스형 컴포넌트와 함수형 컴포넌트로 나뉘는데 현재는 함수형 컴포넌트가 밀고있는 방식이다.나또한 함수형 컴포넌트에 익숙하므로 함수형을 통해 따라해본다.

 

리액트네이티브는 Android 및 iOS 애플리케이션을 빌드하기 위한 오픈 소스 프레임워크로 JavaScript를 사용하여음성녹화나 카메라 사용등의 액세스할수 있을 뿐만 아니라 컴포넌트로 재사용성을 높일 수 있다.

 

 

view

 

 

view는 가장 ui를 구성하는 가장 기본적인 block 아주 작은 사각형 구성 요소이며

여기에는 이미지나 사용자의 input을 받아서 화면을 보여준다.

앱에 있는 각각의 구성요소들은 view형태로 구성되어있고 view안에 각각의 view를 담을 수 있다.

 

안드로이드	ios
ViewGroup	UIView
ImageView/TextView	UIImageView/UITextView

네이티브 app을 개발할 시에

안드로이드의 경우 코틀린이나 자바로 코드를 구현하고 IOS의 경우 스위프트나 Objective-C를 사용하지만

리액트 네이티브는 자바스크립트를 사용해 리액트 컴포넌트를 사용하여 런타임시점에 리액트 네이티브가 해당 ui를 각 플랫폼에 특화된 네이티브 ui로 변환해서 보여준다는 것으로 이해함

 

---

Core Component

네이티브 컨퍼넌트 들 중에 코어컴포넌트들이 있는것같고 이러한 코어 컴포넌트들 외에 다른 컴포넌트들도 만들어서 쓰거나 누군가 만들어 놓은 컴포넌트를 가져다 쓸수 있는것 같다.

 

https://reactnative.directory/

 

여러가지 검색해서 가져다 쓸수 있는 느낌.

 

https://reactnative.dev/docs/components-and-apis

Core Components and APIs · React Native

웹에서 div가 여러 용어로 사용되고 있다.

---

리액트에 익숙해서그런지, 예제코드들이 친숙하게 다가온다.

- jsx

자바스크립트 안에 엘리먼트를 담을수 있는 문법으로 엘리먼트 중간에는 중괄호로 표현식 사용이 가능

- Props

부모 컴포넌트 에서 자식 컴포넌트로 전달하는 값

- State

컴포넌트 자체의 상태값으로 사용자의 행동에 따라 값을 다룰수 있음

 

---

Handling Text Input

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

const PizzaTranslator = () => {
  const [text, setText] = useState('');
  return (
    <View style={{padding: 10}}>
      <TextInput
        style={{height: 40}}
        placeholder="Type here to translate!"
        onChangeText={newText => setText(newText)}
        defaultValue={text}
      />
      <Text style={{padding: 10, fontSize: 42}}>
        {text.split(' ').map((word) => word && '🍕').join(' ')}
      </Text>
    </View>
  );
}

export default PizzaTranslator;

위 코드는 텍스트핸들링 하는 코드인데, 웹에서 input을 통해 onChange로 핸들링 하던것과 마찬가지로 텍스트를 state담아서 원하는 입맛대로 바꿀수 있는 것 같다.

 

---

Using a ScrollView

스크롤뷰는 div와 같은 컨테이너 역할로 스크롤이 가능한 div로 가로나 세로로 스크롤할수 있다.

일반적인 div 스크롤섹션과 유사하다. IOS의 경우에는 ZOOM처리가 가능하다고 하며,

 

※주의할점은 화면에 보이지 않는 요소 까지 렌더링이 된다. 그렇기에 렌더링 되고나서 실행되는 어떠한 hook이나 화면에 리소스가 차지하고 있다고 생각되니 신중하게 사용해야할듯함.

 

Using List Views

 

리액트네이티브의 목록형태는 여러가지 인데 주로 FlatList 또는 SectionList

로 쓰이는 것 같다.

 

플랫리스트는 여러개의 데이터를 보여주는건 스크롤뷰와 같지만 보이는 영역에 대해서만 렌더링되는 큰 차이점이 있다.

또 플랫리스트는 두개의 props를 받아야 하는데 목록형태의 데이터와 와 화면에 어떻게 그릴지에 대한 렌더 아이템을 받아야 한다.

import React from 'react';
import { FlatList, StyleSheet, Text, View } from 'react-native';

const styles = StyleSheet.create({
  container: {
   flex: 1,
   paddingTop: 22
  },
  item: {
    padding: 10,
    fontSize: 18,
    height: 44,
  },
});

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

export default FlatListBasics;

섹션리스트는

ui테이블뷰에 해당한다.

 

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) => index}
        />
      </View>
    );
}

요런형태

keyExtractor = map함수 돌릴때 key값정도로 이해하고 넘어감