공부/React & React Native14 [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: () =.. 2021. 8. 12. [0810] React-Native 강의 정리 Section 11 : Navigation with Parameters Navigation : navigate를 통해 패러미터를 전달할 수 있음. import React from 'react'; import { Text, View, StyleSheet, FlatList, TouchableOpacity } from 'react-native'; import { withNavigation } from 'react-navigation'; const Screen = ({ navigation }) => { //navigate로 ContentsShow 로 이동 + 이동하면서 item.id를 전달 return ( navigation.navigate('ContentsShow', { id: item.id }) }> ); .. 2021. 8. 11. [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 스.. 2021. 8. 10. [0807~0808] React-Native 강의 정리 Section 7 : How to Handle Screen Layout Layout Systems : 3가지 종류가 있음. 1. Box Object Model : 높이와 너비, element를 둘러싼 공간을 중심으로 하나의 element를 배치할 때 사용. 2. Flex Box : 부모 내에 자식 몇 개의 element들을 배치할 때 사용. 3. Position : 부모 내에 하나의 element를 배치할 때 + Box Object Model과 Flex Box를 override 하고 싶을 때 사용. ◎ Box Object Model → Content와 Padding : Background 색상을 보여줌. → Border와 Margin : Background 색상을 보이지 않음. → 각각의 요소에 다른 s.. 2021. 8. 9. [0806] React-Native 강의 정리 Section 6 : State Management in React Components Q. 실질적으로 변수의 값을 바꿀 자식 컴포넌트와, 변수 값을 읽고 띄워야 하는 부모 컴포넌트 중 어디에 state를 선언해야 하는가? → 일반적으로는 state 값을 읽거나 변경해야 하는 부모 컴포넌트에 생성함. → 자식 컴포넌트가 state를 읽어야 할 경우, 부모 컴포넌트에서 prop으로 자식 컴포넌트에 전달할 수 있음. ※ 변수 이름을 모두 대문자로 작성하는 경우 → prop이 아니고 컴포넌트 내에서 configuration option처럼 기능할 변수애 대해 이와 같이 명명. 변수의 변화를 확인하기 1. set~ 함수 실행 시마다 검사하기. → 모든 콜백에 대해 검사 코드를 작성해야 해서 비효율적. 2. 검사.. 2021. 8. 7. [0805] React-Native 강의 정리 Section 6 : State Management in React Components Props : 부모 컴포넌트에서 자식으로 데이터를 넘길 수 있는 시스템 State : 하나의 데이터를 추적하는(track) 시스템. 데이터가 변경되면 앱에서 다시 'render'하게 됨. → 리액트는 자동적으로 변수의 변화를 감지하고 반영하지 않음. → 따라서 변화를 감지하고 이 변화를 실제로 반영시키기 위해 state를 사용함. State 사용에서 생각할 점 1. 어떤 데이터가 변경될 것인가? 2. 데이터의 타입은 무엇인가? 3. 해당 데이터의 초기 값은 무엇인가? //state를 사용하기 위해서는 react 라이브러리에서 가져옴. import React, { useState } from 'react'; import.. 2021. 8. 6. 이전 1 2 3 다음
