[React Native] 모듈 import하여 사용하기, 다른 모듈에 값 전달해주기

1. App.tsx에서 사용할 모듈 : props(태그의 속성으로 전달되는 값)를 받아서 name과 age 속성을 각 컴포넌트에 표시해줌.

// Welcome.tsx

import React from "react";
import { View, Text, StyleSheet, Platform } from "react-native";

function Welcome(props:any) {
    return (
        <View>
            <Text style={styles.text}>Hello Welcome {props.name}</Text>
            <Text style={styles.text}>Age {props.age}</Text>
        </View>
    )
}

const styles = StyleSheet.create({
    text: {
        fontFamily: Platform.select({
          android: "serif"
        }),
        fontSize: 30
    }
})

export default Welcome;

 

2. Welcome 함수를 컴포넌트로 사용함. 이 때 name과 age를 전달해줌.

// App.tsx

import React from "react";
import { View, Text, StyleSheet } from "react-native";
import Welcome from "./src/components/Welcome";

export default function App() {

  return(
    <View style={styles.container}>
      <Text>Hello TSX</Text>
      <Welcome name="gildong" age="20" />
      <Welcome name="chunhyang" age="25" />
      <Welcome name="jimae" age="28" />
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#ff99ff',
    alignItems: "center",
    justifyContent: "center"
  },
})

 

3. 다른 예제

 

// NamedExpModule.tsx

import React from "react"
import { Text, View } from "react-native"

// 변수
const sampleVar = "sample variable"

// 함수
const sampleFunc = () => "sampleFunc() 호출함"

const sampleNumFunc = (num1:number, num2:number) => 
    (num1 * num2)

// object == json
const json = [
    {
        seq: 1,
        title: 'apple',
        content: '사과'
    },
    {
        seq: 2,
        title: 'banana',
        content: '바나나'
    },
    {
        seq: 3,
        title: 'grape',
        content: '포도'
    },
]

const list = () => {
    return json.map((element) => {
        return (
            <View key={element.seq} style={{margin: 10}}>
                <Text>{ element.seq } { element.title }</Text>
                <Text>{ element.content }</Text>
            </View>
        )
    })
}

export { sampleVar, sampleFunc, sampleNumFunc, list }

 

// NamedImptModule.tsx

import React from "react";
import { Text, View } from "react-native";

import { sampleVar, sampleFunc, sampleNumFunc, list } from "./NamedExpModule"

export default function NamedImptModule() {
    return (
        <View>
            <Text>NamedImportModule</Text>
            <Text>{ sampleVar }</Text>
            <Text>{ sampleFunc() }</Text>
            <Text>{ sampleNumFunc(3, 7) }</Text>
            <View>{ list() }</View>
        </View>
    )
}

 

import React from "react";
import { View, Text, StyleSheet } from "react-native";
import Welcome from "./src/components/Welcome";

export default function App() {

  return(
    <View style={styles.container}>
      <Text>Hello TSX</Text>
      <Welcome name="gildong" age="20" />
      <Welcome name="chunhyang" age="25" />
      <Welcome name="jimae" age="28" />
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#ff99ff',
    alignItems: "center",
    justifyContent: "center"
  },
})

 

4. 클래스에 적용하기

 

// ObjectExportModule.ts

import React from "react"

const sampleCallbackFunc = () => {

    console.log("123")

    setTimeout( ( ) => console.log("456"), 1000 )

    console.log("789")
}

// template(==형태)
class User {
    name: String
    age:number

    constructor(name:String, age:number){
        this.name = name
        this.age = age
    }

    userAge(){
        return `${this.name} 님은 ${this.age} 살입니다`
    }
}

export { sampleCallbackFunc, User }

 

// ObjectImportModule.tsx

import React from "react";
import { Text, View } from "react-native";

import { sampleCallbackFunc, User } from "./ObjectExportModule";

const newUser = new User("성춘향", 16)

export default function NamedImportModule() {
    
    sampleCallbackFunc()

    return (
        <View>
            <Text>NamedImportModule</Text>
            <Text>name:{ newUser.name }, age:{ newUser.age }</Text>
        </View>        
    )
}

 

// App.tsx

import React from "react";
import { SafeAreaView, Text } from "react-native";

import NamedImportModule from "./src/screens/ObjectImportModule";

export default function App() {

  return (
    <SafeAreaView>
      <Text>App</Text>
      <NamedImportModule></NamedImportModule>
    </SafeAreaView>
  )
}