메인 화면  : 인증 상태가 해제되면 렌더링 되는 화면  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..

To-Do-List 만들기  등록 : 할 일항목을 추가하는기능수정 : 완료되지 않은 할 일 항목을 수정하는 기능삭제 : 할 일항목을 삭제하는기능완료 : 할 일 항목의 완료 상태를 관리하는 기능 프로젝트를 진행하기 앞서 styled-components/native를 사용하는 데 있어 아래와 같은 오류가 발해서 추가로 패키지를 설치해주었다.Could not find a declaration file for module 'styled-components/native'. npm install --save-dev @types/styled-components-react-native  1. SafeAreaView 컴포넌트: 외부 요인에 의해 컴포넌트 일부가 가려지는 것을 방지하기 위해 사용: 자동으로 padding ..

스타일링  1. 인라인 스타일링: 컴포넌트에 직접 스타일 입력하는 방식: 객체 형태로 전달 (HTML 과의 차이점)  직접 인라인 스타일링으로 텍스트 스타일을 조정해보겠다.첫번째 텍스트에는 글자 색을 black으로 굵기도 600으로 설정했고,두번째 텍스트에는 글자 색을 red, 굵기는 400으로 설정한 결과 각각의 텍스트에 서로 다른 스타일이 적용된 것을 확인할 수 있었다.  이와 같이 인라인 스타일링은어떤 스타일링이 적용되는지 직관적으로 잘 보인다는 장점이 있다. import React from 'react'import { View, Text } from 'react-native'const InlineStyle = () => { return ( Inline Sty..