메인 화면  : 인증 상태가 해제되면 렌더링 되는 화면  1. 내비게이션MainStack 내비게이션 : 채널 생성 화면과 채널 화면MainTab 내비게이션 : MainStack 내비게이션에서 화면으로 사용 👇내비게이션 코드 보기더보기import React from 'react';import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';import { ChannelList, Profile } from '../screens';const Tab = createBottomTabNavigator();const MainTab = () => { return ( )}export default Mai..

인증 화면  이번에는 파이어베이스 인증 기능을 이용해로그인/회원가입 화면을 만들어 보려 한다.  스택 내비게이션을 활용해 간단하게 로그인, 회원가입 스크린을 만들어주었다.   내비게이션이 정상적으로 작동하는 것을 확인하고,로그인 화면부터 이메일, 비밀번호를 입력받을 수 있도록 만들어보겠다.  1. Image 컴포넌트먼저 로고 이미지를 적용하기 위해 이미지 설정을 해주겠다.파이어베이스 스토리지를 사용하지 않기 때문에 직접 웹 사이트 링크를 넣어주었다. 👇이미지 적용 코드 보기더보기components/Image.jsximport PropTypes from 'prop-types';import React from 'react';import styled from 'styled-components/native';..

채팅 애플리케이션  지금까지 학습한 내용을 바탕으로 채팅 애플리케이션을 만들어보려고 한다.구현할 기능은 다음과 같다.로그인/회원가입 : 이메일과 비밀번호를 이용한 로그인과 회원가입프로필: 나의 정보 확인 및 변경채널 생성: 채널 생성 기능채널 목록: 생성된 채널들의 목록 조회채널: 실시간으로 메시지를 송수신하는 독립된 공간 프로젝트를 시작하기 위해 프로젝트를 생성하고 필요한 폴더들을 생성해주었다.npx create-expo-app react-native-simple-chat --template blankcomponents： 컴포넌트파일관리contexts: Context API 파일 관리navigations： 내비게이션파일관리screens: 화면 파일 관리utils: 프로젝트에서 이용할 기타 기능 관리  ..

FlatList  대량의 데이터 목록을 효율적으로 렌더링하기 위한 기본 제공 컴포넌트ScrollView와 다르게 렌더링 최적화(Virtualized List)를 지원해 성능이 뛰어나며, 무한 스크롤도 쉽게 구현할 수 있다.map 보다 더 많은 기능을 내포하고 있어서 더 많이 사용됨  1. FlatList 특징 한 번에 모든 데이터를 렌더링하지 않고 보이는 부분만 렌더링하여 성능 최적화(Virtualized List)스크롤이 가능한 리스트 컴포넌트로, ScrollView보다 메모리 효율적동적 데이터(ex. 데이터 길이 가변적, 데이터 양 예측 불가능) 리스트 관리가 용이무한 스크롤(onEndReached) 및 풀 투 리프레시(refreshing) 지원 💡 FlatList vs map() + ScrollV..

모바일 애플리케이션은 일반적으로 다양한 화면이 상황에 맞게 전환되며 나타난다.그렇기 때문에 내비게이션은 가장 중요한 기능 중 하나이다. + 리액트 네이티브에서는 외부 라이브러리를 이용해야 한다.   리액트 내비게이션  내비게이션을 쉽고 간단하게 관리할 수 있도록 도와준다.지원 종류 : 스택(stack), 탭(tab), 드로어(drawer) 내비게이션구조 : NavigationContainer 컴포넌트 ▷ Navigator 컴포넌트 ▷ Screen 컴포넌트 1️⃣ Screen 컴포넌트 화면으로 사용되는 컴포넌트name (= 화면 이름), component (= 화면으로 사용될 컴포넌트 전달) 속성 지정해야함name은 반드시 서로 다른 값화면으로 사용되는 컴포넌트에는 항상 navigation과 route가 ..

전역 상태 관리  일반적인 데이터 흐름 : 부모 → 자식 컴포넌트데이터 사용하는 컴포넌트가 많을 시 : 최상위 App 컴포넌트 (상태 관리 - props) → 하위 컴포넌트 그러나 props를 이용해 데이터를 전달하는 것은 번거롭다. 필요한 하위 컴포넌트에 도달하기까지 단계를 많이 거쳐야함부모로부터 받은 데이터는 변경할 수 없으므로 다시 역순으로 변경 요청해야함관리하는 상태 추가, 변경될 시 모든 컴포넌트를 찾아 수정해야함 위와 같은 단점이 존재하기 때문에 최상위 컴포넌트에서 전역 상태를 관리하는 것은 불편하다.  따라서중간 과정을 거치지 않고 한번에 원하는 데이터를 받아와 사용하기 위해Context API를 이용할 수 있다.   Context API  createContext 함수 : Context 생..

useMemo  동일한 연산 반복 수행 제거 => 성능 최적화첫번째 파라미터 = 함수두번째 파라미터 = 함수 실행 조건 => 배열로 전달 JavaScript, Expo, React Native로 배열을 설정하고 버튼을 클릭할 때마다 배열을 순환하며 문자열 길이를 구해보겠다. 그 결과,버튼 클릭 시 문자열 길이를 구했으며마지막 문자열 이후에는 더이상 변화가 없기에 길이를 반복해서 구하는 것을 확인했다. import React, { useState } from 'react';import styled from 'styled-components/native';import Button from './Button';const StyledText = styled.Text` font-size: 24px; `;con..

useState  변수와 그 변수를 수정할 수 있는 세터 함수를 배열로 반환관리할 상태 수만큼 여러번 사용 가능값 변경은 반드시 세터함수 사용 1. 세터 함수1️⃣ 세터함수에 변경될 상태 값 전달하는 방법 const [count, setCount] = useState(0); { setCount(count + 1); }}/>  2️⃣ 세터 함수의 파라미터에 함수 전달하는 방법 파라미터 함수에 변경 전 상태 값을 전달하고 변경 방법을 정의한다. 세터 함수는 비동기로 동작하기 때문에 호출해도 상태가 바로 변경되지 않는다는 점이 문제이다.따라서 업데이트가 동시에 여러개 발생할 경우,세터 함수에 함수를 파라미터로 전달해 이전 상태값을 사용하면 문제를 해결할 수 있다.  { setCount(prev..