[0811] React-Native 강의 정리

Section 12 : Advanced State Management with Context

※ Array.find()

: 배열에서 주어진 함수의 조건을 만족하는 첫 번째 값을 반환함.

(참고 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/find)

 

 

navigationOptions

: 표시될 Screen에 설정하면, 해당 Screen이 렌더링될 때 리액트에서 자동으로 natigationOptions가 반환하는 객체를 확인함.

Screen.navigationOptions = () => {
    return {
        //여기에 설정한 element가 Header의 오른쪽에 나타남.
        headerRight: () => (
            <TouchableOpacity>
                <Feather name="plus" size={30}/> 
            </TouchableOpacity>
        ) 
    };
};

- 서로 유사한 기능을 수행하는 로직이 있다면, 묶어서 하나의 컴포넌트로 만드는 것도 유효.

 

 

Default Props

: props에 디폴트 값을 넣어주는 것.

→ 전달받은 prop이 없을 경우 생길 수 있는 undefined 에러를 해결할 수 있음.

Screen.defaultProps = {
	name: '', //name이라는 이름의 prop의 디폴트 값을 ''으로 설정.
};

 

 

※ Array.map()

: 배열에서 배열의 각 요소에 주어진 함수를 호출한 결과를 모아 새로운 배열을 만들어 반환.

(참고 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map)

 

 

Navigation.pop()

: 현재 화면에서 바로 전 화면으로 넘어갈 때 사용함.

const Screen = ({ navigation }) => {
    return (
        <Button onPress={() => navigation.pop()}/>
    );
};

---

Section 13 : Data API Sync

영구적으로 데이터를 저장하는 방법

1. 기기에 저장하기

2. 외부 API 서버에 저장하기

→ npmjs.com/package/json-server : 개발 목적으로 JSON 데이터를 저장하기에 좋은 패키지.

 

- ngrok : PC 및 해당 PC에서 돌아가는 서버스가 외부에서도 작동할 수 있도록 함.