Daily Log

View, Text, StyleSheet 컴포넌트 from react-native
expo 라이브러리에 있는
expo/vector-icons, 
StatusBar, 
LinearGradient

날씨 정보를 Weather 컴포넌트에 넘겨주는 법

1. data.main.temp를 App.js 에서 Weather.js에 넘겨야한다.

2. 그러기 위해서는 상위 App.js에서 불러오는데이터를  state에 저장한다.

3. setState는 useState와 같은 역할을 한다. 회사에서는 hooks를 사용하니깐 class 형으로 개발하는 해당 프로젝트에서 몰랐던 부분임.

setState는 어떤 일을 하나요?

setState()는 컴포넌트의 state객체에 대한 업데이트 실행

getWeather class내부에서 아래와 같이 선언하고

this.setState({ isLoading: false, temp: data.main.temp });

render() 시킬 때 this.state로 state값 대입

  render() {
    const { isLoading, temp } = this.state;
    return isLoading ? <Loading /> : <Weather temp={Math.round(temp)} />;
  }

StyleSheet 컴포넌트

아래 코드를 사용하여 여러 style을 한 곳에 담아서 씀

StyleSheet.create

상하좌우 가운데 정렬

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center"
    }
});

styles 선언 후에는 적용할 컴포넌트에 붙이기

export default function Weather({ temp }) {
    return (
        <View style={styles.container}>
            <Text >{temp}</Text>
        </View >
    );
}

expo/vector-icons

이미 엑스포 설치할 때 설치 돼있음

그래서 import만 해서 사용하면 됨

import * as React from 'react';
import { View, StyleSheet } from 'react-native';
// import는 MaterialCommunityIcons등 많음. 원하는 것 import 해오면 됨
import { Ionicons } from '@expo/vector-icons';

export default function App() {
  return (
    <View style={styles.container}>
      <Ionicons name="md-checkmark-circle" size={32} color="green" />
    </View>
  );
}

보이는 결과값:

LinearGradient

expo 라이브러리로 npm으로 설치할 필요 있음

LinearGradient가 <View> <View/>와 같은 역할을 함 => 굳이 <View>를 쓰지 않아도 된다는 말

import { LinearGradient } from "expo-linear-gradient";


<LinearGradient
  colors={weatherOptions[condition].gradient}
  style={styles.container}
>
</LinearGradient>

Statusbar

barStyle prop으로 색 변경 가능

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

<StatusBar barStyle="light-content" />

2개의 스타일 함께 사용하기

 <View style={{ ...styles.halfContainer, ...styles.textContainer }}>
        <Text style={styles.title}>{weatherOptions[condition].title}</Text>
        <Text style={styles.subtitle}>
          {weatherOptions[condition].subtitle}
        </Text>
 </View>

그 외

Math.round() 올림

switch-case 문이 아닌 객체, 객체 배열에서 값을 가져올 수 있다.

우선 React-Native를 쓰려면 기본적으로 React를 알아야한다.

React-Native로 날씨앱 만들기 강의를 수강중인데, import되는 라이브러리중에 처음보는 라이브러리인 PropType이 있어 알아보았다.

목적

- 부모로부터 전달받은 컴포넌트의 props 타입 확인을 하기 위해 사용한다.

- 자식 컴포넌트에 명시해놓은 데이터 타입과, 부모로부터 내려받은 타입이 일치하지 않으면 경고문이 뜬다.

사용법

npm이나 yarn으로 설치부터 한다.

yarn add proptypes

prop-types 라이브러리해서 import 하여 사용할 수 있다.

import PropTypes from 'prop-types';

- PropTypes는 전달받은 데이터의 유효성을 검증하기 위해 사용된다.

- prop에 유효하지 않는 값이 전달되었을 때 경고문이 Javascript 콘솔에 나타난다.

- propTypes는 개발모드에서만 확인 가능

import PropTypes from 'prop-types';

class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}

Greeting.propTypes = {
  name: PropTypes.string
};

PropTypes로 정의가능한 타입

import PropTypes from 'prop-types';

MyComponent.propTypes = {
  // prop가 특정 JS 형식임을 선언할 수 있습니다.
  // 이것들은 기본적으로 모두 선택 사항입니다.
  optionalArray: PropTypes.array,
  optionalBool: PropTypes.bool,
  optionalFunc: PropTypes.func,
  optionalNumber: PropTypes.number,
  optionalObject: PropTypes.object,
  optionalString: PropTypes.string,
  
  //News 나 Photos가 아니면 경고 => 배열에 포함된 값 중에 하나 만족
  // 열거형(enum)으로 처리하여 prop가 특정 값들로 제한되도록 할 수 있습니다.
  optionalEnum: PropTypes.oneOf(['News', 'Photos']),

  // 위에 있는 것 모두 `isRequired`와 연결하여 prop가 제공되지 않았을 때
  // 경고가 보이도록 할 수 있습니다. => func이며 필수값으로 안내려올 때 경고!
  requiredFunc: PropTypes.func.isRequired,
  
   // 모든 데이터 타입이 가능한 필수값
  requiredAny: PropTypes.any.isRequired,
  
  // 리액트 엘리먼트
  // <div>123</div> , <Component />
  menu: PropTypes.element,

  // prop가 클래스의 인스턴스임을 선언할 수 있습니다.
  // 이 경우 JavaScript의 instanceof 연산자를 사용합니다.
  optionalMessage: PropTypes.instanceOf(Message),

  // 여러 종류중 하나의 종류가 될 수 있는 객체
  optionalUnion: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number,
    PropTypes.instanceOf(Message)
  ]),

  // 특정 타입의 행렬
  optionalArrayOf: PropTypes.arrayOf(PropTypes.number),

  // 특정 타입의 프로퍼티 값들을 갖는 객체
  optionalObjectOf: PropTypes.objectOf(PropTypes.number),

    
  };

- defaultProps를 통해 초기 Prop값을 정의할 수도  있음

class Greeting extends React.Component {
  static defaultProps = {
    name: 'stranger'
  }

  render() {
    return (
      <div>Hello, {this.props.name}</div>
    )
  }
}

함수형

import PropTypes from 'prop-types'

function HelloWorldComponent({ name }) {
  return (
    <div>Hello, {name}</div>
  )
}

HelloWorldComponent.propTypes = {
  name: PropTypes.string
}

export default HelloWorldComponent

더 많은 내용은 아래 공식 문서 확인

React-Native 컴포넌트

  <View>는 <div>와 같음

flex: 사용하여 레이아웃짠다.

-> 브라더끼리는 숫자로 경쟁하고, 숫자 큰 애가 더 큰 뷰를 차지함

RN Style 

리액트 네이티브에만 있는 CSS가 있음.

Style

- RN의 대부분의 스타일은 웹 CSS 동작과 일치함

- 다만, id, class등의 선택자로 스타일 지정하는 것이 아님

- StyleSheet.create메소드를 이용해 스타일 object를 작성하여 컴포넌트에 style props를 전달함

기본문법

- CSS 문법은 key, value를 가지는 object 형태

기존의 CSS와 RN 스타일과의 차이점

id, class 등의 선택자 사용 안함

; 사용 대신 , 사용 

. 사용하지 않고 : 사용

.red {...} //기존

red:{...} //RN


.blue { //기존
	color: blue;
    font-size: 30pt;
}

blue: { //RN
	color: blue,
    font-size: 30pt,
},

스타일의 속성명은 하이픈 사용하지 않고 CamelCase 사용

.content { //기존 CSS
	background-color: #eee;
}


content: { // RN
	backgoundColor: '#eee',
}

RN에서는 fontSize: 30, margin: 20 처럼 px, em등의 단위 생략함

=> 적용되는 단위에는 ios에서는 논리 픽셀, 안드로이드에서는 pt와 유사한 DIP사용

margin이나 padding의 축약형 대신 상하, 좌우 값을 한 번에 적용시킬 수 있는 속성이 존재

flexGrow

flexShrink

flexBasis

marginVertical

marginBottom

paddingVertical

등

HTML/CSS과 스타일 우선순위가 다름

기존

- html에 선언된 순서 class="red bigTex"와 상관없이 color값은 CSS에서 선언한 우선순위 규칙에 따라 나중에 선언된 값이 적용됨

RN

- 여라개의 스타일을 전달할 때 배열을 이용

render() {
return (
    <Text style={[styles.red, styles.bigText]}>red, then bitText</Text>
);
}

- style 에서 선언된 순서와 상관 X

- 나중에 호출된 스타일이 덮어 씌우는 방식임

React-Native 스타일 컴포넌트

- Text 컴포넌트는 중첩해서 사용가능 => 자식 text 컴포넌트가 부모 text 컴포넌트 스타일 상속받음

텍스트 하이라이팅 처리할 떄 주로 사용함

- 중첩된 inline-level 처럼 동작하는데, margin, padding, border 등 box-model 관련된 스타일이 적용되지 않는다.

Touchable

Button: 기본 버튼 컴포넌트, styles props를 이용해 스타일링할 수 없어서 UI 개발시 활용도 떨어짐

주요 props, ios의 경우 버튼 text color / 안드의 경우 버튼 background color 변경

TouchableHightlight:

- 터치시 하이라이트가 발생함

- 내부에 반드시 하나의 자식 컴포넌트를 삽입해야함

- 여러개가 필요하면 View나 <></>로 그룹화 필요

- 주요 props => UnderlayColor: 터치시 하이라이팅되는 색상 지정

TouchableOpacity:

- 터치시 opacity 값 적용됨 /  다른 Touchable 컴포넌트와 다르게 자식요소가 올 수 있음

- 주요 props: activeOpacity 값

Image

html img태그처럼 이미지 표햔할 때 사용하는 컴포넌트

- 앱 내부 이미지파일: require로 불러오고 width, height 를 설정하지 않으면 원본사이즈 대로 렌더링됨

- 네트워크 이미지나 url 이미지를 사용할 떄는 image의 width height 안넣으면 안불러와짐

출처: 노마드코더, WIT블로그

환경셋팅

설치/버전 확인(특정 버전 이상만 가능)

node -v (10이상)

npm -v (6이상) -> 노드 설치하면 기본적으로 설치됨

xcode -> simulator가 필요

app store나 구글 플레이스토어에서

exop client 다운 => 핸드폰에서 테스트해볼 수 있는 유일한 방법

expo 설치

npm install -g expo-cli

왜 expo를 사용해야할까?

=> expo를 절대 사용하지 말라는 개발자도 많음(ㅠㅠ) -  상용 앱 개발시 어차피 네이티브 코드에서 다 다시 설정해줘야 하는 경우가 많음

=> 네이티브 파일 접근이 어려움(큰 기업에선 필요함)

=> 인스타그램, 우버 정도는 가능

Expo CLI

=> 네이티브 파일을 숨기고 모든걸 관리해줌. 

=> 휴대폰에서 앱을 테스트해볼 수 있음

=> 개발자 계정 필요없이~

=> 네이티브 파일을 크게 제어할 수 없는게 큰 문제임

=> expo는 create-react-app과 비슷함

프로젝트 만들기

expo init my-project

=> blank로 시작(처음해보는거니깐~)

깃 연동

git remote add origin 주소

git pull origin master

프라이빗 repository의 경우 SSH 설정 필요

app.json이 expo가 읽는것

시작

yarn start 

=> expo dev tool이 열림

=> 좌측 하단에셔 LAN은 같은 와이파이로 붙어있으면 연동됨

=> QR 코드로 안드/ios둘 다 에서 열어볼 수 있음

폰에서 테스트 하기

android => QR로 테스트가능

ios => expo 앱에서 가입을 하고 terminal에서 expo login해야함

=> 라이브로 반영됨

가끔 발생하는 오류는 로컬서버 재시작을 하면 해결됨 

리액트네이티브의 원리

1. 나는 리액트네이티브의 컴포넌트를 사용하고, 그 컴포넌트안에서는 브릿지라는 것으로 자바스크립코드롤 네이티브 코드로 연결시켜줌

Javascript와 Swift Code와 Java Code를 서로를 이해하기 위한 브릿지가 필수임

ex. 인스타그램, 데이팅 앱 등은 리액트 네이티브에 적합함 / 컨텐츠 위주. 폰카메라 등 네이티브 코드를 자주 건들거나 많은 데이터를 전송하는 류의 개발을 RN으로하는 것은 안좋음

리액트 네이티브는

span이런거 사용안함.

글을 사용하려면 view나 text만 사용해야함