컴포넌트

1. JSX

• Javascript + XML
  이후 babel을 이용하여 javascript + html 파일로 변환이 된다.
  

• 하나의 부모로 감싸줘야 한다.
  또는 <Fragment>, </Fragment> <>, </>를 이용하여 묶어준다.

• 변수는 {} 로 묶어서 사용한다.

• if 문보다는 삼항 연산자를 사용한다.

• null 은 문제가 없지만 undefined는 오류 발생

• 주석은 {/ 주석 내용 /}

2. 내장 컴포넌트

• react 와 유사

• react-bootstrap 과 비슷한 느낌이다.

• 아래 공식문서를 자주 봐야 할듯 하다.
  같은 명령어도 ios와 android간 다르게 적용되는 것이 존재한다.
  https://reactnative.dev/docs/components-and-apis

3. 커스텀 컴포넌트

• react 에서 새로운 외장 컴포넌트를 만드는것과 같다.

4. props

• react 에서의 props와 같은 기능

4.1 children

• props 내에서는 children 이라는 속성이 항상 존재한다.
• children 과 같이 태그 내에 존재하는 데이터는
  props 속성중 children이라는 속성으로 전달된다.

// App.js
export default function App() {
  return (
    <View style={styles.container}>
      <MyButton title="Mybutton 1" onPress={() => Alert.alert('1')} />
      <MyButton title="Mybutton 2" onPress={() => Alert.alert('2')} />
      <MyButton>children</MyButton>
      <MyButton>children1</MyButton>
      <MyButton>children2</MyButton>
    </View>
  );
}

// MyButton.js
const MyButton = props => {
  console.log(props.children);
  return (
    <TouchableOpacity onPress={props.onPress}>
      <View style={{ backgroundColor: 'green', padding: 10, margin: 10 }}>
        <Text style={{ fontSize: 20, color: 'white' }}>{props.children || props.title}</Text>
      </View>
    </TouchableOpacity>
  );
};

4.2 defaultProps

4.2.1 기본값 적용

// MyButton.js
const MyButton = ({ title = 'title', onPress = () => {}, children }) => {
  return (
    <TouchableOpacity onPress={onPress}>
      <View style={{ backgroundColor: 'green', padding: 10, margin: 10 }}>
        <Text style={{ fontSize: 20, color: 'white' }}>
          {children || title}
        </Text>
      </View>
    </TouchableOpacity>
  );
};

4.2.2 defaultProps 사용

const MyButton = ({ title, onPress, children }) => {
  return (
    <TouchableOpacity onPress={onPress}>
      <View style={{ backgroundColor: 'green', padding: 10, margin: 10 }}>
        <Text style={{ fontSize: 20, color: 'white' }}>
          {children || title}
        </Text>
      </View>
    </TouchableOpacity>
  );
};

MyButton.defaultProps = {
  title: 'default',
  onPress: () => Alert.alert('default'),
};

4.2.3 propTypes 라이브러리 사용

• https://github.com/facebook/prop-types

• 설치 : npm install prop-types

• Typescript 로 기능을 대체 가능하다.

import React from 'react';
import { TouchableOpacity, View, Text, Alert } from 'react-native';
import PropTypes from 'prop-types';

const MyButton = ({ title, onPress, children }) => {
  return (
    <TouchableOpacity onPress={onPress}>
      <View style={{ backgroundColor: 'green', padding: 10, margin: 10 }}>
        <Text style={{ fontSize: 20, color: 'white' }}>
          {children || title}
        </Text>
      </View>
    </TouchableOpacity>
  );
};

MyButton.defaultProps = {
  title: 'default',
  onPress: () => Alert.alert('default'),
};

MyButton.PropTypes = {
   // 반드시 string 이여야 하며 데이터가 항상 있어야 한다.
  title: PropTypes.string.isRequired, 
  onPress: PropTypes.func,
};

5. state

• react 와 동일

6. 이벤트

6.1 Press

• 직접 눌러보며 아래 그림의 동작 순서를 확인하자

// MyButton.js
import React from 'react';
import { TouchableOpacity, View, Text, Alert } from 'react-native';
import PropTypes from 'prop-types';

const MyButton = ({ title, onPress, children }) => {
  return (
    <TouchableOpacity
      onPress={() => console.log('press')}
      onPressIn={() => console.log('pressIn')}
      onPressOut={() => console.log('pressOut')}
      onLongPress={() => console.log('Long')}
      delayLongPress={3000}
    >
      <View style={{ backgroundColor: 'green', padding: 10, margin: 10 }}>
        <Text style={{ fontSize: 20, color: 'white' }}>
          {children || title}
        </Text>
      </View>
    </TouchableOpacity>
  );
};

MyButton.defaultProps = {
  title: 'default',
  onPress: () => Alert.alert('default'),
};

export default MyButton;

6.2 Change

• react 에서는 event.target
• react native 에서는 event.nativeEvent
  아래는 event.nativeEvent 시 출력 내용
  

// App.js
import react, { useState } from 'react';
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, Button, Alert, TextInput } from 'react-native';
import MyButton from './MyButton';

export default function App() {
  const [add, setAdd] = useState(0);
  const [multi, setMulti] = useState(1);

  return (
    <View style={styles.container}>
      <TextInput
        // onChange={event => console.log(event.nativeEvent)}
        onChangeText={text => console.log(text)}
        style={{ borderWidth: 1, borderColor: 'black', fontSize: 20 }}
      ></TextInput>