2021. 10. 27. (수) TIL - React Native [[update - 29일(금)]]

# 학습 전 나의 상태

JS기초 학습을 마치고 드디어 2주차 강의인 리액트 네이티브를 배우게 된다.

예전 퍼스트 프로젝트에서는 하려다가 중간에 포기 하는 바람에 프로젝트를 망친 기억이 있어서

마음이 아프지만.. 이번엔 포기 없이 잘 배워서 나만의 앱을 만들어 보고 싶다.

즐기면서 해봐야지 :)

 

# 오늘의 학습 내용

리액트 네이티브란?

• 자바스크립트 하나로 안드로이드 앱과 iOS앱 두 가지 모두 만들어주는 라이브러리
• 페이스북에서 만듬

 

expo란?

• 리액트 네이티브로 개발 중인 앱을 쉽게 확인해주는 앱 제공

 

JSX 문법

• <> 태그(=element)로 화면을 그리는 것
• 규칙
  • 리액트 네이티브에 들어있는 태그를 사용해야 한다.  

    

  • 태그 사용 설명은 공식문서 참고 (https://reactnative.dev/docs/statusbar)
  • return에 의해 렌더링 될 땐 항상 () <= 소괄호 안에 작성해야 하고 그 안에 전체를 감싸는 태그(<>)가 있어야 한다.
  • 주석을 작성할 때는 {/* */} 로 해야햔다. 이게 번거롭다면 주석에 쓸 내용을 작성하고 cmd + / 를 하면 주석처리가 된다.
• 노랑 경고창이 뜨는 경우 함수 안에 return 위에 [console.disableYellowBox = true;] 를 넣어 안보이게 할 수 있다.

 

<View>

• 영역을 나타냄

<text>

• 텍스트(문자) 작성 위함

<ScrollView>

• 앱 화면을 벗어나는 영역의 경우 스크롤이 가능하게 해 모든 컨텐츠를 볼 수 있다.

<Button>

• 스스로 닫는 태그
• 태그 안에 속성이 존재한다.

  <Button 
  style={styles.buttonStyle} 
  title="버튼입니다 "
  color="#f194ff" 
  onPress={function(){
  Alert.alert('팝업 알람입니다!!')
  }}
  />

• Alert.alert('내용') 으로 팝업을 사용한다.
• 버튼이 눌릴 때마다 onPress에 등록된 함수가 호출

<Image>

• 스스로 닫는 태그
• 태그 안에 속성이 존재한다.
• 이미지를 넣는 방식
  • 첫 번째
    • 내부에서 불러오는 방식으로 assets 폴더 안에 있는 .png 불러온다
    • import main from './assets/main.png' 이렇게 import 해서 사용한다.
    • source={main}

    • import React, { useState, useEffect } from 'react';
      import { View, Image } from 'react-native';
      import main from '../assets/main.png';
      
      export default function App() {
        return (
      	<View style={styles.containerOne}>
      	  <Image source={main} style={styles.mainImage} />
          </View
        )
      }

  • 두 번째
    • 외부에서 불러오는 방식이다.
    • 이때는 import 할 필요가 없다.
    •  source={{uri:'이미지링크주소'}} 이렇게 이지미를 외부에서 불러오게 한다.

    • import React, { useState, useEffect } from 'react';
      import { View, Image } from 'react-native';
      
      export default function App() {
        return (
      	<View style={styles.containerOne}>
      	  <Image source={{uri: 'url주소'}} style={styles.mainImage} />
          </View
        )
      }

<TouchableOpacity>

•  react-native 에서 버튼 기능
• 왜 <Button> 대신 사용할까?
  • Button은 안드로이드와 ios에서 다르게 보이기 때문에 관리하는데에 어려움이 있다

• <ScrollView style={styles.containerTwo} horizontal >
    <TouchableOpacity style={styles.btnAll}>
      <Text style={styles.btnTitle}>전체보기</Text>
    </TouchableOpacity>
  </ScrollView>
  
  
  // horizontal => 스클로을 좌우로 이동하게 해준다.

<StyleSheet>

• 태그에 스타일을 준다.
• 방식은 리액트 네이티브에서 제공하는 StyleSheet 기능을 가져와 적용한다 
• 객체를 하나 만드는데 이쁜 옷들을 정리해 놓은 객체이다.
• 이 객체에 옷을 사용법 대로 잘 정리하고 JSX 엘리번트에서 사용하면 된다.
• 자주사용하는 스타일 속성

  const styles = StyleSheet.create({
    container: {
      //영역을 잡는 속성입니다. 따로 자세히 다룹니다.
      //flex: 1은 전체 화면을 가져간다는 뜻입니다
      flex: 1,
      //영역의 배경 색을 결정합니다
      backgroundColor: '#fff',
      //아래 두 속성은 영역 안의 컨텐츠들의 배치를 결정합니다. 
      //flex를 자세히 다룰때 같이 자세히 다룹니다
      justifyContent:"center",
      alignContent:"center"
    },
    textContainer: {
      //영역의 바깥 공간 이격을 뜻합니다(하단 이미지 참조)
      margin:10,
      //영역 안의 컨텐츠 이격 공간을 뜻합니다(하단 이미지 참조)
      padding: 10,
      //테두리의 구부러짐을 결정합니다. 지금 보면 조금 둥글죠?
      borderRadius:10,
      //테두리의 두께를 결정합니다
      borderWidth:2,
      //테두리 색을 결정합니다
      borderColor:"#000",
      //테구리 스타일을 결정합니다. 실선은 solid 입니다
      borderStyle:"dotted",
  
    },
    textStyle: {
      //글자 색을 결정합니다. rgb, 값 이름, 색상코드 모두 가능합니다
      color:"red",
      //글자의 크기를 결정합니다
      fontSize:20,
      //글자의 두께를 결정합니다
      fontWeight:"700",
      //가로기준으로 글자의 위치를 결정합니다
      textAlign:"center"
    }
  });

   

 Flex 

• 영역의을 차지하는 속성
• 상대적이다.

  import React from 'react';
  import { StyleSheet, Text, View } from 'react-native';
  
  export default function App() {
    return (
      <View style={styles.container}>
        <View style={styles.containerOne}>
  
        </View>
        <View style={styles.containerTwo}>
  
        </View>
      </View>
    );
  }
  
  const styles = StyleSheet.create({
    container: {
      flex:1
    },
    containerOne: {
      flex:1,
      backgroundColor:"red"
    },
    containerTwo:{
      flex:2,
      backgroundColor:"yellow"
    }
  });​

• 위 예제에서 보면 가장 최상위의 container 스타일을 가져가는 Viwe 태그는 디바이스 전체 영역을 가져간다.
• 이 안쪽의 contatinerOne 스타일이 부여된 View 태그는 전체를 3등분한 뒤 1/3을 containerTwo 는 2/3을 가져간다.

 

 FlexDirection 

• 자리 잡은 영역의 방향이다.
• flexDirection: "row" - 가로 방향
• flexDirection: "column" - 세로 방향
• 기본 값은 "column"

 

 justifyContent 

• flexDirection 과 동일한 방향으로 정렬하는 속성
• flexDirection: "row" 에서는 좌우 정렬
• flexDirection: "column" 에서는 상하 정렬
• flex-start, center, flex-end, space-between, space-around 속성을 가진다.

  

  앱개발 종합반 강의 내용 중 사진1

• space-between 과 space-around

  

  앱개발 종합반 강의 내용 중 사진2

 alignItems 

• flexDirection과 수직한 방향(반대방향)으로 정렬
• flexDirection: "row" 에서는 상하 정렬
• flexDirection: "column" 에서는 좌우 정렬
• flex-start, center, flex-end, stretch 속상을 가짐

  

  앱개발 종합반 강의 내용 중 사진3

 

module system

• 여러 JS 파일이 있을 경우, 서로 다른 각각의 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));​

• 앱에서의 모듈 시스템

  export default function App() { ... }​

• 함수 App()가 내보내져서 어디선가 사용이 된다.
• 내가 만든 화면을 그리는 함수들은 리액트 네이티브로 전달되어 (export) 화면을 최종적으로 그린다는 것으로 이해하기
• 예제) 모듈 시스템으로 data.json 불러오기

  import data from './data.json';​

• data.json

  {
      "tip":[
          {
              "idx":0,
              "category":"생활",
              "title":"먹다 남은 피자를 촉촉하게!",
              "image":"https://firebasestorage.googleapis.com/v0/b/sparta-image.appspot.com/o/lecture%2Fpizza.png?alt=media&token=1a099927-d818-45d4-b48a-7906fd0d2ad3",
              "desc":"먹다 남은 피자는 수분이 날라가기 때문에 처음처럼 맛있게 먹을 수 없는데요. 이럴 경우 그릇에 물을 받아 전자레인지 안에서 1분 30초에서 2분 정도 함께 돌려주면 촉촉하게 먹을 수 있습니다. 물이 전자레인지 안에서 수증기를 일으키고, 피자에 촉촉함을 더해줍니다.",
              "date":"2020.09.09"
          },
          {
              "idx":1,
              "category":"생활",
              "title":"바나나를 싱싱하게 보관하기",
              "image": "https://firebasestorage.googleapis.com/v0/b/sparta-image.appspot.com/o/lecture%2Fbanana.png?alt=media&token=886aeb87-7ff8-4498-8674-7e4f878b8845",
              "desc":"바나나에 날파리가 꼬이거나 금방 익어버리는 것을 예방하기 위한 방법인데요. 바나나 양쪽 끝을 자른 후, 보관용 케이스나 비닐봉지에 묶어 밀봉합니다. 그리고 냉장고에 넣어주면 되는데요. 하루에 1~2개씩 꺼내서 싱싱하게 먹을 수 있습니다.",
              "date":"2020.09.09"
          },
          {
              "idx":2,
              "category":"생활",
              "title":"셔츠에 묻은 볼펜 자국 없애기",
              "image": "https://firebasestorage.googleapis.com/v0/b/sparta-image.appspot.com/o/lecture%2Fshirt.png?alt=media&token=6388d9fb-f87f-4234-b580-46a2f918aab1",
              "desc":"셔츠를 자주 입는 사람의 경우, 종종 볼펜 자국이 묻기 마련인데요. 이럴 경우에는 집에 있는 물파스로 가볍게 지울 수 있습니다. 옷 뒷부분을 키친타올로 받쳐 번지는 것을 방지한 후, 볼펜 자국 있는 부분을 물파스로 눌러주고, 키친타올로 닦아냅니다.",
              "date":"2020.09.09"
          },
          {
              "idx":3,
              "category":"재테크",
              "title":"잠자는 내 돈을 찾아라",
              "image": "https://firebasestorage.googleapis.com/v0/b/sparta-image.appspot.com/o/lecture%2Fmoney1.png?alt=media&token=491096e7-0b57-40a3-991b-b984193f8018",
              "desc":"‘새는 돈’에는 미처 몰랐던 카드 포인트, 휴면예금이나 환급금도 포함됩니다. 확실히 파악하지 못한 잠자는 돈을 찾아보고 자투리 돈들을 모으는 것도 중요합니다. 케이블방송, 위성방송 서비스를 이용하면서 중복 납부한 요금, 셋톱박스 보증금 등 돌려받지 않은 돈이 있는지 확인 해보세요. 또, 카드 포인트 통합 조회 서비스를 이용해 여러 개의 카드 포인트가 모두 얼마인지 체크해두는 것이 좋습니다. 보험해약 환급금, 휴면 보험금이나 휴면 예금을 찾아보고 돌려받는 일도 요즘에는 어렵지 않습니다.",
              "date":"2020.09.09"
          },
          
      ]
  }​

• map을 이용해 JSX 안에서 반복 적용하기
  • 예제

    import React from 'react';
    
    import { StyleSheet, Text, View, Image, TouchableOpacity, ScrollView} from 'react-native';
    import data from './data.json';
    
    export default function App() {
      console.disableYellowBox = true;
    
      let tip = data.tip;
    
      return (
        <ScrollView style={styles.container}>
          <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>
        </ScrollView>
      );
    }​

삼항연산자

const result = "조건" ? "참" : "거짓"

// 예제
const result = 10 > 9 ? true : false     // true
const result2 = 10 === 9 ? true : false  // false

리액트 네이티브에서 자바스크립트를 사용할 땐 {} 안에서 사용해야 한다.

{ const result = 10 > 9 ? true : false }    // true
{ const result2 = 10 === 9 ? true : false } // false

 

 

 

 

 

# 학습을 마치며

앱 화면을 만드는 것을 진행하고 있다.

강의 내용이 있지만 먼저 최대한 만들어 보고 강의를 보면서 부족한 부분을 채우고자 한다.

style 하는 부분이 좀 어렵게 느껴진다. 그래도 할 수 있는데까지 하고, 내일 강의 보면서 점검 해봐야지

학습 내용도 내일 보충해서 업데이트 해야겠다.

 

29일(금)

리액트 네이티브의 기초를 잘 배우기 위해서 공부중이다. 현재 진도는 3주차 4강인데.. 음.. 지금 좀 막혔다.

state부터 머리가 먹먹해지더니 지금.. 쥐가 난거 같다..ㅋ 그래서 잠시 머리 좀 식힐겸 2주차 개발일지를 작성했는데

여기서 어려운 부분은 아직까지는 없는 것 같다. 리액트를 공부했던 적이 있어서 그런지 여기까지는 이해가 되는 편이고 

따라하기 예제도 그다지 어렵지 않게 완성했다.

다만.. state 부터가 문제인데.. 다시 차근차근 들으면서 집중해 봐야겠다. 

 

 

# 시청 또는 참고

  - 스파르타코딩클럽 앱 개발 종합반 수업 중..