React Native TIL

리액트 네이티브를 이용하면 기존 하이브리드 앱에서 겪던 성능 문제 없이 자바스크립트를이용해서 iOS, 안드로이드, 모바일 애플리케이션을 개발할 수 있습니다.React Native의 가장 큰 장점은 쉬운 접근성입니다.새로운 언어를 배울 필요 없이 JavaScript를 이

expo를 사용하려고 하는데 아래와 같은 오류가 떴다.The legacy expo-cli does not support Node +17. Migrate to the versioned Expo CLI (npx expo). 무슨 문제일까 열심히 구굴링 후 node를 다운그

react-native CLI를 이용하는 방법EXPO를 이용하는 방법프로젝트의 이름은 알파벳 대소문자와 숫자만 허용한다.설치특정 버전의 react-native를 이용해서 프로젝트를 생성하고 싶으면 아래 코드를 넣어 생성할 수 있습니다.Expo는 다양한 기능을 제공함으로

react native 프로젝트르 생성후 npm start를 해주었더니...web으로 열수가 없다.....무슨 문제일까 봤는데 이렇게 설치하라고 해서 설치해주었더니 웹에서 잘 열린다! 웹에서 열리는데.... 문제는 expo go 앱에서 안드로이드에서 안열리는 것이다..

JavaScript + XML을 의미하며 개체 생성과 함수 구출을 위한 문법적 편의를 제공하기 위해 만들어진 확장 기능입니다. JSX는 react와 react native에서 사용되며 가독성이 높고 작성하기 쉽다는 장점이 있습니다.JSX코드로 작성된 코드는 이후 바벨을

컴포넌트란 소프트웨어 시스템에서 독립적인 기능을 수행하는 모듈로써 교체가 가능한 부품입니다. react native에서는 재사용할 수 있는 조립 블록으로 화면에 나타나는 UI요소라고 생각하면 됩니다.react native에서는 다양한 컴포넌트를 제공하고 있습니다. 안드

태그 사이에 있는 값 : childrenchildren이 props보다 우선시 된다. 앞에 두개의 undefined는 태그 안에 내용이 없기 때문에 undefined가 나오는 것이다.props의 기본값 설정만약 props로 전달하는 값이 없다면 위에 같이 나오게 되는데

onPressIn : 사용자가 처음 터치했을 때 호출onPress : onPressOut 이후에 호출onLongPress : 터치를 일정시간 이상하고 있으면 호출onPressOut : 터치를 땠을 때 호출만약 onLongPress가 호출되는 시간을 설정하고 싶다면 de

React Native에서는 인라인 스타일은 객체로 입력해야 한다.React Native에서는 카멜 케이스로 작성해야 한다.css에서 클래스 속성과 비슷한 것. StyleSheet를 사용하여 스타일을 적용하면 인라인 스타일로 작성했을 때에 비해 적용된 스타일의 이유를

1. Tagged Template Literals > + import할 때 native에서 styled-components/native를 import해야한다. 컴포넌트는 react native에서 제공하는 컴포넌트여야한다.(ex. View, Text) 스타일드 컴포넌

SafeAreaView 컴포넌트 아이폰의 노치 디자인 때문에 타이틀이 가려질 수 있디.

구글 Material Design 아이콘https://fonts.google.com/icons?selected=Material+Icons:edit:&icon.query=edit&icon.platform=ios무엇 중 하나를 설정하는 방법. 배열로 전달이 되어야

ID가 아닌 ID로 저장한 경우에는 ID가 문자 그대로 저장된다. ID로 저장한 createTask2함수는 ID:{id,text,completed}를 저장하고, ID로 저장한 createTask3함수는 고유한 id : {id,text,completed}를 저장한다.Ob

todo리스트를 만들었는데 앱을 끄면 다시 reset되는 문제가 발생했다. 그래서 AsyncStorage를 이용하여 로컬에 데이터를 저장하고 앱이 시작될 때 저장된 데이터를 불러오는 기능 추가하였다. AsyncStorage > AsyncStorage를 이용하면 re

로딩화면과 아이콘을 생성해주려고 한다.Expo 프로젝트의 아이콘과 로딩화면 설정은 app.json파일에서 확일할 수 있다.아이콘과 로딩 화면을 변경하는 방법은 1\. asset 폴더에 있는 파일과 동일한 크기의 이미지를 생성해서 파일을 교체하는 것이다.2\. app.j

아래 코드의 경우 2씩 올라가야 하는데 각각의 setter함수가 비동기로 동작하여 1씩만 증가한다.setter 함수에 함수를 전달해서 상태 변수의 현재 값을 바탕으로 변화를 주어야 한다. setCount 함수에 설정하는 값을 값이 아닌 함수 형태로 전달해서 상태변수의

Context API를 이용하면 전역으로 상태를 관리해야 하는 상황에서 props를 일일이 전달하지 않아도 원하는 컴포넌트에서 해당 데이터를 이용할 수 있다. 컨텍스트 API를 사용할 때 가장 먼저 호출되는 함수는 createContext이다. 컨텍스트를 생성하는 함수

모바일 애플리케이션은 다양한 화면이 상황에 맞게 전환된다. 상황에 맞는 화면 이동은 중요한 요소이기 때문에 일반적인 상황에서 내비게이션은 필수적인 기능이다. 1. navigation의 구조와 특징 1-1. 컴포넌트 1-2. 컴포넌트 > 내비게이션을 구성하고

일반적인 화면 이동 네비게이션. 스택형식을 띄운다. 예를 들어 홈 화면에서 목록 화면으로 이동하고 채팅화면으로 이동하고 다시 나와 목록화면으로 가는 것을 아래 사진으로 표현설치된 라이브러리에서 제공하는 CreateStackNavigator을 이용해서 stack 내비게이

홈 화면에서 헤더가 사라짐헤더를 없애니깐 특정 기기의 노치에 의해 화면이 가려지는 현상이 발생한다. SafeAreaView로 해결해줄 수 있지만 React Navigation에서 제공하는 useSafeAreaInsets을 이용해서 더 디테일한 설정 가능 useSafeA

Tab Navigation은 화면 위에 쌓는 것이 아니라 선택된 버튼에 해당하는 화면으로 전환된다는 특징이 있다. 공식문서 : https://reactnavigation.org/docs/bottom-tab-navigator/생성된 Tab Navigation에는

서버를 직접 만들지 않고 firebase를 이용하였습니다. firebase는 서버에 대한 지식이 없어도 다양한 백엔드 기능을 사용할 수 있게 해주는 개발 플랫폼입니다. 회원가입과 로그인을 위해 Authentication을 이용하고 채널 정보와 주고받은 메시지 정보를 저

컴포넌트 자체에다가 ref를 설정해주니 아래와 같은 오류가 발생했다. Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use R

React Native 프로젝트 당시 두개의 문제를 직면했다.1\. 위의 사진처럼 키보드가 input 창을 가린다.2\. 화면의 크기에 따라 구성한 화면이 너무 길어서 화면을 넘어가는 현상이 생긴다.이러한 이슈를 해결하기 위해 react-native-keyboard-a

회원가입하는 과정에서 사용자가 프로필 사진을 입력하는 기능을 만들려고 한다. >expo에서 제공하는 imagepicker을 사용하여 기기의 사진에 접근하는 기능을 구현 https://docs.expo.dev/versions/latest/sdk/imagepicker/?

로그인하거나 회원가입 통신할때 사용자가 다른 행동을 하지 않도록 Spinner 컴포넌트를 만드려고 한다. 공식문서 : https://reactnative.dev/docs/activityindicator먼저 components 폴더 안에 Spinner 컴포넌트를

채널을 firebase에 저장하려고 한다. Cloud Firestore를 이용해서 채널을 저장하려고 한다. Cloud Firestore 메뉴로 이동해서 데이터베이스를 누른다.이렇게 만들었더니 datastore 모드로 구글 콘솔에서만 데이터를 관리할 수 있다고 해서 아래

채널 목록 화면을 만들려고 하는데 데이터의 양이 많기에 스크롤을 활용하여 데이터를 렌더링하려고 한다. 대표적으로 FlatList 컴포넌트와 ScrollView 컴포넌트가 있는데 TodoList를 만들때 ScrollView를 사용해보았으니 이번에는 FlatList 컴포넌

실시간으로 채팅하는 기능을 구현하려고 한다. 간단한 채팅 기능을 구현하기 위해 Gifted Chat 라이브러리를 활용하여 채팅 앱을 구현하였다. Gifted Chat 라이브러리는 채팅 화면에서 필요한 많은 기능들을 제공하고 있어 빠르게 채팅앱을 구현할 수 있는 장점이

app.json 수정 빌드를 하기 위해서는 app.json을 수정해야 한다. name : name 프로퍼티는 사용자들이 보는 앱의 이름으로 서비스 이름으로 변경해야 한다. ios 프로퍼티 bundleIdentifier : 앱의 식별자로 다른 프로젝트와 중복되지