react 안드로이드 화면에 module 이용하여 데이트 구현하는 기본 문법 / javascrpit / typescript/ list /module

 

Export / Import로 모듈 구현하기

src 폴더 생성 > src 폴더 안에 screens 폴더 생성 > screens 폴더 안에 

NamedExportModuel.tsx/NamedImportModuel.tsx 생성

NamedExportModule.tsx

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


//변수
const sampleVar = "sample variable"

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

                        //number=소수+정수
const sampleNumFunc = (num1:number,num2:number) => (num1*num2)

//Object == json
const json = [
{
    seq:1,
    title:'apple',
    content:'사과',

},
{ seq:2,
    title:'peach',
    content:'복숭아',

},
{ seq:3,
    title:'grape',
    content:'포도',

},
]

//element대신 다른 단어를 써도 된다
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}

export문을 사용하여 sampleVar, sampelFunc, sampleNumFunc, list를 내보낸다.

 

NamedImportModule.tsx

import문을 통해 sampleVar, sampelFunc, sampleNumFunc, list을 받는다.

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

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

export default function NamedImportModule(){

return (
    <View>
        <Text>NamedImportModule</Text>
        <Text>{sampleVar}</Text>
        <Text>{sampleFunc}</Text>
        <Text>{sampleNumFunc(3,6)}</Text>
        <View>{list()}</View>
    </View>

)


}

App.tsx

import문을 통해 NamedImport 모듈에서 받았던  sampleVar, sampelFunc, sampleNumFunc, list를 모두 받는다.

View태그에 NamedImportModule을 사용하여 모듈에 있는 모든 요소를 구현한다

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

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

export default function App(){


  return (
    <View>
      <Text>Hello Tsx</Text>
      <NamedImportModule/>
    </View>
  )
}

 

위의 코드를 실행하면 안드로이드 화면은 아래와 같다.

---

Class를 Export 하기

src 폴더 생성 > src 폴더 안에 screens 폴더 생성 > screens 폴더 안에

ObjectExportModuel.tsx/ObjectImportModuel.tsx 생성

ObjectExportModule.tsx

 

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}

User라는 클래스 만들고 클래스 안에 생성자 만든다.

SampleCallbackFunc,User를 Export하여 밖에서 Import가능하게 만든다.

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>
    )
}

Export한 SampleCallbackFunc,User를 Import한다.

Import한 User 클래스를 생성자를 통해서 구현한다.

NamedImportMoudule 이란 함수를 만들고 Import한  SampleCallbackFunc를 실행시킨다.

 

 

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>
  )
}

 

App.tsx 실행시 터미널 화면

456은

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

 

코드 때문에 123 789보다 1초 늦게 출력됐다.

 

 

 

 

App.tsx 실행시 안드로이드 화면

---