vscode로 react 이용하여 안드로이드 화면에 코드 구현하는 기본문법 (typescript / nodejs / javascript)

npx react-native init (프로젝트명) --template react-native-template-typescript

위의 명령어로 구현된 프로젝트가 생성되면

좌측 콘솔에

cd 프로젝트명
npm start

우측 콘솔에 

cd 프로젝트명
npm run android 

입력하여 설정 완료하기

 

위에 명시된대로 순서대로 입력하면 콘솔창이 아래와 같아진다.

 

 

생성된 프로젝트 폴더에 있는 App.tsx 파일 열고 아래와 같이 입력한다음 저장해보자.

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

/* export default function App(){


  //상수
  const str:String = 'Hello World'

 

  return (
    <SafeAreaView>
    <Text>Hello TSX World</Text>
    <Text>{str}</Text>
    </SafeAreaView>
  )
} */


export default function App(){

const isLoading = true

/* if(isLoading){
  return (
    <SafeAreaView>  
      <Text>Loading...</Text>
    </SafeAreaView>
  )
}else{
  return(
    <SafeAreaView>  
    <Text>Hello Tsx World</Text>
  </SafeAreaView>
  )
}
} */


/* return(

  <SafeAreaView>
    {isLoading && <Text>Loading...</Text> }
    {!isLoading && <Text>Hello Tsx World</Text> }
  </SafeAreaView>
)
 */

/* const child:any = isLoading ? (<Text>Loading...</Text>) : (<Text>Hello Tsx World</Text>)
return <SafeAreaView>{child}</SafeAreaView> */

/* const child=[
  <Text>Hello Tsx  1 World</Text>,
  <Text>Hello Tsx  2 World</Text>,
  <Text>Hello Tsx  3 World</Text>
]

 */

//const child = [1,2,3].map(i=><Text>Hello Tsx {i} World</Text>)

const child = ['hello','my','world'].map(str=><Text>{str}</Text>)


return <SafeAreaView>{child}</SafeAreaView>




}



/* 
Tage  attribute     property(속성)
    <div id="root" style="background:black">
      <p>hello</p> 자식요소
    </div>
*/

 

 

아래와 같이 화면에 출력된다.

 

 

---

App.tsx 코드입력

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

/*export default class App extends React.Component{

 name:String = ''

 constructor(props:any){
  super(props)
  this.name = "홍길동"

 } 

 render() {
     
  return(
    <SafeAreaView>
      <Text>Hello Tsx{this.name}</Text>
    </SafeAreaView>
  )
 }
} */

export default function App(){
  const name:String='홍길동'

       
  return(
    <SafeAreaView>
      <Text>Hello Tsx{name}</Text>
    </SafeAreaView>
  )
}

안드로이드 화면

 

---

App.tsx

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


const global = "전역변수값"

const smapleFunc =() =>{

console.log('sampleFunc호출') // sampleFunc호출

const local ="지역변수값"

console.log(global) //전역변수값
console.log(local) //지역변수값

}

console.log(global)

export default function App(){

smapleFunc()

//let var 비교

if(true){
let name = "heehee"
var hobby = "movie"
}

var hobby = "reading" 

//console.log(name) name은 if문 괄호 안에서만 성립되어서 괄호 밖에선 출력이 안된다.
console.log(hobby) // movie 아닌 reading 출력

const age = 24

const myAge =`홍길동 $(age)` 
console.log(myAge) // " 홍길동 $(age)"  라고 출력. ``가 "" 역할을 한다.


const str = null
if(str===null||str===undefined){
  console.log("null 또는 undefined입니다.") // null 또는 undefined입니다. 
}

let ex1 = null
ex1??console.log("null입니다.") //null입니다.

ex1 = undefined
ex1 ?? console.log("undefined입니다.") // undefined입니다.

ex1 = "Hi Nice to meet you"
console.log(ex1 ??"null입니다.") //NVL IFNULL 과 유사. NULL 이 아니니까 Hi Nice to meet you가 출력된다.



/* 
function rectArea(width:any, height:any){
  const result = width*height
  return result
} 
*/


//width, height때문에 에러가 나오지 않는다.
/* const rectArea= function(width, height){
  const result = width*height
  return result
} */

const rectArea= (width = 7, height=9) =>{ //arrow식
  const result = width*height
  return result
} 


console.log(rectArea(3,6)) //18
console.log(rectArea()) //63

const func = (a,b, ...rest) => {
  console.log(rest) 
}

func(1,2,3,4,5) //가변인수만 출력해서 3,4,5가 나온다.


//object 
const user ={
name: "홍길동",
message: "나는 성공할 것이다."
}
                  //user의 message를 말하는 것 "나는 성공할 것이다."가 출력


//const samFunc = ({message}:any) => console.log(message)
const samFunc = (hUser) => {  
  console.log(hUser.name) //홍길동  
  console.log(hUser.message) //나는 성공할 것이다.
}

samFunc(user)

return(

<SafeAreaView>
<Text>Hello Tsx World</Text>
</SafeAreaView>
)

}

 

터미널창

안드로이드 화면

---

App.tsx

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

export default function App(){

  const x =10
  if(x===10){
    console.log("X=10입니다.") //X=10입니다.
  }

  const color ="red"
  if(color==="yellow"){
    console.log("yellow입니다.")

  }else if(color==="red"){
    console.log("red입니다.") //"red입니다."

  }else{
    console.log("red or yellow가 아닙니다.")
  }

  const y=5
  switch(y){
    case 1:
      console.log("y==1")
      break
    case 5:
    console.log("y==5") //"y==5"
     break
    default:
      console.log("y==?")
  }

  for(let i=0; i<10; i++){
    console.log(`${i} 번째 루프`) //1 번째 루프~ 9 번째 루프 까지 반복
  }


  let user ={
    name: "성춘향",
    age: 16,
    address:"남원시"
  }

  for(let key in user){
    console.log(key) //name , age, address 가 출력
  }

  for(let key in user){
    console.log(key+" "+user[key]) //name 성춘향 , age 16, address 남원시 가 출력
  }

  let arrNum = [10,20,30]
  for(let i in arrNum){
    console.log(i) //0,1,2 가 출력
  }

  for(let i in arrNum){
    console.log(i+" "+arrNum[i]) //0 10,1 20,2 30 가 출력
  }

  let w =0

  while(w < 5){
    console.log(`${w}번째 루프`) // 0번째 루프~4번째 루프 까지 출력
    w++
  }


  return(
    <View>
      <Text>Hellow World</Text>
    </View>

  )


}

터미널창

안드로이드 화면

---

App.tsx

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

export default function App(){

 /*  const shopping = ["빵","햄","잼"]

  console.log(shopping[0]) //빵

  for(let i in shopping){
    console.log(shopping[i]) //빵 햄 잼
  }

 console.log(shopping[3]) //undefined만 나오지 에러는 나오지 않는다. */

 //배열인지? Object인지
 const samArr = [] // array
 const samObj = {} // object


 console.log(Array.isArray(samArr)) //isArray는 Array냐고 묻는 것. true가 나온다
 console.log(Array.isArray(samObj)) //false

  const arrSam = ["red","green","blue"]
  console.log(arrSam.indexOf("green")) //1
  console.log(arrSam.length) //3

  //배열 정렬
  console.log(arrSam.sort()) // 오름차순 ["blue", "green", "red"] b가 제일 앞에 r가 제일 뒤에 갔다.
  console.log(arrSam.reverse()) //내림차순 ["red", "green", "blue"]

  const arrNum = [11,2,33,4]

  console.log(arrNum.sort()) // [11, 2, 33, 4] 로 출력. ASCII로 정렬되어서 생각하던 오름차순으로 정렬 안된다.
  
  console.log(arrNum.sort((a,b) =>a-b )) //[2, 4, 11, 33] 오름차순으로 출력되었다.

  console.log(arrNum.sort((a,b)=>b-a)) //[33, 11, 4, 2] 내림차순으로 출력되었다.

  
return(
<View>
  <Text>
    hello Tsx
  </Text>
</View>


)

}

 

터미널창

안드로이드화면

 

---

App.tsx

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


export default function App(){

  const color = "red"

  const sampleObj ={ color:color}
  console.log(sampleObj) //{"color": "red"}
  console.log(sampleObj.color) //{"color": "red"}

  const samObj1 = {color} //red
  console.log(samObj1) //  {"color": "red"}

  const user = {
    name:"kim",
    id:23,
    age:18
  }

  console.log(user.name) //kim
  console.log(user["id"]) //23

  const points= {
    x:100,
    y:180
  }

  points.x =300
  console.log(points) //{"x": 300, "y": 180}

  points.z = 200
  console.log(points) //{"x": 300, "y": 180, "z": 200} 문제없이 z 값이 추가된다.

  
  delete points.y
  console.log(points) //{"x": 300, "z": 200} 문제 없이 y 값이 삭제된다.

  const pointObj = {a:10, b:20, c:30}
  const keys = Object.keys(pointObj)
  console.log(keys) // ["a", "b", "c"]

  const values = Object.values(pointObj)
  console.log(values) // [10, 20, 30]
  console.log(values[0]) //10

  const posts = [
    {
      id:1,
      content:"Java",
      like:3
    },
    {
      id:2,
      content:"Android",
      like:4
    },
    {
      id:3,
      content:"React Native",
      like:5
    }
  ]  

  for(let i=0;i<posts.length;i++){
    console.log(`타이틀: ${posts[i].content} 좋아요:${posts[i].like}`)
    //타이틀: Java 좋아요:3 ~ 타이틀: React Native 좋아요:5 까지 출력
  }
  
  posts.forEach((post) =>{
    return console.log(`타이틀: ${post.content} 좋아요:${post.like}`) 
    //타이틀: Java 좋아요:3 ~ 타이틀: React Native 좋아요:5 까지 출력

  })
  
/* 
  posts.forEach((post) =>{
    return(
      <Text>타이틀: ${post.content} 좋아요:${post.like}</Text>
    )
  }) */

  const objMap = posts.map((post)=>{
    return `타이틀: ${post.content} 좋아요:${post.like}`
  })
  console.log(objMap) 
  //["타이틀: Java 좋아요:3", "타이틀: Android 좋아요:4", "타이틀: React Native 좋아요:5"]



  return(
<View>
  <Text>Hello Tsx</Text>
</View>

)


}

터미널창

안드로이드화면

---

이 코드 부터는 화면에 본격적인 스타일을 적용한다. 

 

따라서 프로젝트에 src 라는 폴더 생성 / src라는 폴더 안에 componet 폴더 생성

component 폴더 안에 Welcome.tsx라는 파일 생성한다.

 

Welcome.tsx

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

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

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

App.tsx

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

import Welcome from "./src/component/Welcome";

export default function App() {
  return (
    <View style={ styles.container }>
        <Welcome name="홍길동" age="24"></Welcome>
        <Welcome name="성춘향" age="16"></Welcome>
        <Welcome name="일지매" age="22"></Welcome>
    </View>
  )
}

const styles = StyleSheet.create({
  container:{
    flex: 1,
    backgroundColor: '#ff0',
    alignItems: "center",
    justifyContent: "center"
  },
  text: {
    fontFamily:Platform.select({
      android:"serif"
    }),
    fontSize: 30
  }
})

안드로이드 화면