앱개발 학습. 자바스크립트(모듈, 반복문, 조건문, 삼항연산자), 페이지화

 

//앱개발 학습 - 2주차(스파르타코딩클럽)

모듈 시스템

• Export, Import 이 구문을 통해 다른 js 파일의 함수를 사용할 수 있음

//A.js 파일
//times, plusTwo 함수를 외부로 내보낼 준비를 합니다.
export function times(x) {
  return x * x;
}
export function plusTwo(number) {
  return number + 2;
}

//B.js 파일
//다른 자바스크립트 파일에서 다음과 같이 불러와 사용합니다.
import { times, plusTwo } from './util.js';
console.log(times(2));
console.log(plusTwo(3));

반복문으로 datas.json의 데이터를 불러와 적용하기

import data from './data.json';

• map 함수를 이용해서 구현
  • data.tip 리스트를 tip 변수로 가져오고,
  • map 함수로 tip 리스트의 내용물을 꺼내 활용한다
• 태그 사이에 변수를 넣고 싶으면 중괄호를 사용

  let tip = data.tip;
...
<View style={styles.cardContainer}>
    {/* 하나의 카드 영역을 나타내는 View */}
    { 
      tip.map((content,i)=>{
        return (<View style={styles.card} key={i}>
          <Image style={styles.cardImage} source={{uri:content.image}}/>
          <View style={styles.cardText}>
            <Text style={styles.cardTitle} numberOfLines={1}>{content.title}</Text>
            <Text style={styles.cardDesc} numberOfLines={3}>{content.desc}</Text>
            <Text style={styles.cardDate}>{content.date}</Text>
          </View>
        </View>)
      })
     }

  </View>

{}표현식 안에서 조건문 사용: 삼항연산자

• 홀수번째 카드만 색깔을 주고싶을 때
• 삼항연산자

let result = 10 > 2 ? "참" : "거짓"

(기본 모습)
let result = 조건 ? 참일 때 : 거짓 일때

(예제)
let result = 10 == 9 ? true : false  // result <-- false 값 할당  
let result = 10 !== 9 ? true : false // result <-- true 값 할당  
let reuslt = 99 > 10 ? true : false // result <-- true 값 할당

• i를 2로 나누었을때 나머지가 0이면 true

<View style={styles.cardContainer}>
    {/* 하나의 카드 영역을 나타내는 View */}
    { 
      tip.map((content,i)=>{
        return i % 2 == 0 ? (<View style={styles.cardEven} key={i}>
          <Image style={styles.cardImage} source={{uri:content.image}}/>
          <View style={styles.cardText}>
            <Text style={styles.cardTitle} numberOfLines={1}>{content.title}</Text>
            <Text style={styles.cardDesc} numberOfLines={3}>{content.desc}</Text>
            <Text style={styles.cardDate}>{content.date}</Text>
          </View>
        </View>) : (<View style={styles.cardOdd} key={i}>
            <Image style={styles.cardImage} source={{uri:content.image}}/>
            <View style={styles.cardText}>
              <Text style={styles.cardTitle} numberOfLines={1}>{content.title}</Text>
              <Text style={styles.cardDesc} numberOfLines={3}>{content.desc}</Text>
              <Text style={styles.cardDate}>{content.date}</Text>
            </View>
          </View>)

      })
     }

  </View>

cardEven:{
    flex:1,
    flexDirection:"row",
    margin:10,
    backgroundColor:"#FFFED7",
    borderRadius:20,
    borderBottomWidth:0.5,
    borderBottomColor:"#eee",
    paddingBottom:10
  },
  cardOdd:{
    flex:1,
    flexDirection:"row",
    margin:10,
    borderBottomWidth:0.5,
    borderBottomColor:"#eee",
    paddingBottom:10
  },

페이지화

• 일반적으로 Pages 폴더에 js 스크립트들을 넣고, App.js에서 로직에 맞게 불러오는 형태로 구현

import React from 'react';
import MainPage from './pages/MainPage';
import AboutPage from './pages/AboutPage';

export default function App(){
  //return (<MainPage/>)
  return(<AboutPage/>)
}