[0809] React-Native 강의 정리

Section 9 : Using Outside API's

리액트의 통신

1. fetch : 리액트의 내장 기능.

→ 사용이 복잡함.

2. axios : 외부 라이브러리.

→ 사용하기 쉬움.

 

 

Axios 통신

(참고 1 : https://tuhbm.github.io/2019/03/21/axios/)

(참고 2 : https://이듬.run/axios/guide/api.html#구성-옵션)

 

import axios from 'axios';
//yelp API에 접근하기 위한 컴포넌트

//axios.create : axios 객체 생성
export default axios.create({
    baseURL: '[요청에 사용할 서버 url]',
    headers: { //서버에 전송할 헤더
        //Authorization 스펠링 주의
        Authorization: 'Bearer [API key 값]'
    },
});

※ 화면 상의 컨텐츠를 업데이트 한다. == state를 사용한다.

---

Section 10 : Making Hooks Reusable

useEffect

: 컴포넌트가 화면에 처음 렌더될 때 단 한 번 실행되는 Hook.

 

useState의 두 번째 매개변수

- useState(() => {})

: 컴포넌트가 렌더링될 때마다 매번 화살표 함수를 실행함.

 

- useState(() => {}, [])

: 컴포넌트가 처음 렌더링되었을 때만 화살표 함수를 실행함.

 

- useState(() => {}, [value])

: 컴포넌트가 처음 렌더링되었을 때 + value 변수 값이 변경되었을 때만 실행됨.

 

→ Hook들을 모아 별도의 파일로 만들면 다른 컴포넌트에서도 재사용이 가능하다는 장점이 있음.

→ Hook를 만들 때는 주로 'use~' 형식의 이름을 사용함.

 

※ Javascript filter 함수

: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

Array.prototype.filter() - JavaScript | MDN

 

---

Section 11 : Navigation with Parameters

Image

- source : Image에 띄울 소스를 설정.

→ 이미지의 url을 설정하려면 객체 형태로.

→ Image를 띄우기 위해서는 width & height 설정이 필요함.

import React from 'react';
import { Text, View, Image, StyleSheet } from 'react-native';

const Screen = ({ result }) => {
    return (
        <View>
            <Image style={styles.image} source={{ url: result.image_url }}/>
        </View>
    );
};

const styles = StyleSheet.create({
    image: {
        width: 250,
        borderRadius: 4,
        height: 120,
    }
});

※ React-Native의 디폴트 폰트 크기는 14.

 

 

ScrollView

: Primitive 컴포넌트.

→ 일반적으로는 View 의 역할을 하지만, ScrollView 내부의 내용들이 화면 상에 다 나타나지 않는다면 자동적으로 스크롤을 만듦.

 

※ View가 화면 상의 모든 공간을 차지하게 하고 싶을 때

1. flex 사용

2. Empty Element 사용

//View의 역할을 대신하면서도 별다른 설정이 필요 없음.
<>
</>

 

 

withNavigation

: 감싸고 있는 컴포넌트에 navigation prop을 전달해주는 컴포넌트. (참고 : https://ibrahimovic.tistory.com/58)

→ 중첩된 자식 컴포넌트를 통해 전달하거나, 직접 전달할 수 없는 상황에서 사용 가능.