React Native7 Notifee 정리 React Native에서 로컬 알림을 보낼 수 있게 해주는 패키지는 대표적으로 react-native-notifications, react-native-push-notifications, notifee 등이 있다. 이중 널리 쓰이는 것으로는 react-native-push-notifications 이 있는데, 깃허브를 살펴보니 현재 패키지가 활발히 관리되고 있는 상태가 아니기 때문에 다른 패키지 사용을 고려해보라는 내용이 적혀있었다. 대체안으로써 추천된 것 중 하나가 Notifee인데, 과거엔 유료였으나 얼마 전부터 완전 무료로 풀린 것으로 보인다. 해서 기본적인 사용법을 기록해둔다. 설치 npm install --save @notifee/react-native yarn add @notifee/reac.. 2023. 5. 20. [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. [0804] React-Native 강의 정리 Section 3 : List Building - With Style! React에서 어떻게 List를 표현할 것인가? : React Native에서 제공하는 Primitive Element인 FlatList 사용 FlatList : 배열을 받아서 Element의 리스트로 변환함. → data와 renderItem prop을 필요로 함. → data : 리스트 형태로 표현할 데이터들 → renderItem : 각 item을 element로 바꿀 함수 const Screen = () => { const fruits = [ { name: 'Fruit 1' }, { name: 'Fruit 2' }, { name: 'Fruit 3' }, { name: 'Fruit 4' }, { name: 'Fruit 5' },.. 2021. 8. 5. 이전 1 2 다음
