공부78 [0814 ~ 0815] React-Native 강의 정리 Section 15 : In-App Authentication Async Storage : React-Native에서 로컬에 데이터를 저장하기 위한 모듈. 지금은 더 이상 사용되지 않음. → 이미지나 비디오 등의 미디어를 저장하기 보다는 더 작은, JSON 오브젝트 등을 저장하는 데에 좋음. - setItem(key, value) : 기기에 데이터를 저장함. - getItem(key) : 저장된 데이터를 가져옴. - removeItem(key) : 저장된 데이터를 삭제함. Navigation → 여태까지 스크린 전환에 사용해온 방법은 navigation prop을 받아서 navigate를 사용하는 것이었음. ⇒ navigation prop에 접근할 수 없는 곳에서 navigation 기능을 수행하기 어려.. 2021. 8. 16. [0812~0813] React-Native 강의 정리 Section 13 : Data API Sync useEffect : 컴포넌트의 렌더링이 완료된 다음 원하는 작업을 수행시키는 기능. (참고 : https://ko.reactjs.org/docs/hooks-reference.html#useeffect) useEffect(() => {}, []) - 첫 번째 매개변수 : 조건을 만족할 때마다 실행됨. - 두 번째 매개변수 : 함수가 호출되는 조건을 설정. → 배열 안에 전달한 값이 변경될 때만 useEffect가 실행됨. 두 번째 매개변수에 아무것도 전달하지 않으면 렌더링 될 때마다 첫 번째 매개변수에 전달된 함수가 호출됨. 두 번째 매개변수에 '빈 배열'을 전달하면 useEffect는 단 한 번만 실행됨. navigation.addListener() : .. 2021. 8. 14. [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. 이전 1 ··· 3 4 5 6 7 8 9 ··· 13 다음
