'react-native' 태그의 글 목록
my code archive
article thumbnail
[리액트 네이티브] 채팅 애플리케이션 만들기 3. 채팅방 생성, 메시지 전송, GiftedChat 컴포넌트

1. 채널(채팅방) 생성 파이어베이스 데이터베이스 -서버를 구축하지 않고 파이어베이스의 데이터베이스 활용. -파이어베이스에서 제공하는 파이어스토어는 NoSQL 문서 중심 데이터베이스로써, SQL 데이터베이스와 달리 테이블이나 행이 없고 컬렉션(collections), 문서(document), 필드(field)로 구성됨. -컬렉션과 문서는 항상 유일한 ID를 가지고 있어야함. 이번 프로젝트에서는 channels라는 ID를 가진 하나의 컬렉션을 만들고 생성되는 채팅방을 channels 컬렉션에 문서로 저장 예정. 파이어베이스 데이터베이스 규칙 수정 ChannelCreation.js KeyboardAwareScrollView 컴포넌트 : Input 컴포넌트를 사용할 때 자동으로 스크롤 위치를 이동하여 키보드가..

article thumbnail
[리액트 네이티브] 스택(stack) 내비게이션, 탭(tab) 내비게이션

일반적으로 모바일 애플리케이션은 하나의 화면이 아닌, 다양한 화면이 상황에 맞게 전환되면서 나타남. => 내비게이션(navigation)은 모바일 애플리케이션에서 가장 중요한 기능 중 하나임!! => 리액트 네이티브에서는 내비게이션을 지원하지 않는다. 외부 라이브러리를 이용해야 한다. 🤍리액트 내비게이션 리액트 네이티브 애플리케이션의 내비게이션을 쉽고 간단하게 관리할 수 있도록 도와줌 지원하는 내비게이션 종류 : 스택(stack) 내비게이션, 탭(tab) 내비게이션, 드로어(drawer) 내비게이션 구조 : NavigationContainer, Navigator, Screen 컴포넌트 Screen 컴포넌트 : 화면으로 사용되는 컴포넌트로, name과 component 속성을 지정해야함. name은 화면 ..

article thumbnail
[리액트 네이티브] Hooks, useEffect, useRef, useMemo, 커스텀 Hooks 만들기

🤍리액트 네이티브 훅(React Native Hooks)이란? 리액트 16.8 버전에서 새롭게 추가된 기능 이전에는 컴포넌트 상태 관리, 생명 주기에 따른 특정 작업 시 클래스형 컴포넌트를 사용해야 했음. Hooks는 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 연동할 수 있게 해주는 함수 Hooks 목적 useState 상태 유지, 변경 useEffect 이벤트 처리 useContext 정보 공유 useReducer 상태 유지 및 변경(Redux) useCallback 콜백 함수 캐시 useMemo 데이터, 값 캐시 useRef 특정 컴포넌트 선택 🤍리액트 네이티브 훅(React Native Hooks) 실습 expo init react-native-ho..

반응형
반응형