youbing 님의 블로그

1. expo-font 설치npx expo install expo-font 2. assets/fonts 폴더에 .ttf 폰트 추가/my-app ├── assets │ ├── fonts │ │ ├── MyCustomFont.ttf │ │ ├── AnotherFont.ttf ├── App.js 3. 폰트 로딩 코드 추가 (App.js)import { useEffect, useState } from "react";import { Text } from "react-native";import * as Font from "expo-font";import { View } from "react-native";export default function App() { const [fontsLoaded,..

본 실습 내용은 아래 깃허브에 자세히 작성하였습니다.https://github.com/studyReactNative/chat GitHub - studyReactNative/chatContribute to studyReactNative/chat development by creating an account on GitHub.github.com 목표 기능로그인 / 회원가입 : 이메일과 비밀번호를 이용한 로그인과 회원가입프로필 : 나의 정보 확인 및 변경채널 생성 : 채널 생성 기능채널 목록 : 생성된 채널들의 목록 조회채널 : 실시간으로 메시지를 송수신하는 독립된 공간 9.1 프로젝트 준비npx create-expo-app chatcd chatnpm install @react-navigation/native..

ScrollView 컴포넌트스크롤 가능한 영역을 생성할 수 있게 해줌.default : 세로 스크롤, 스크롤바 제공주의 : 전체 자식 요소를 한 번에 렌더링하기 때문에, 자식 요소가 매우 많으면 성능 저하 발생 (대신, FlatList, SectionList 사용 가능)FlatList 컴포넌트ScrollView와 유사한 기능을 수행하며, 대량의 데이터를 효율적으로 표시하는 데 적합.(필수) data : 렌더링할 데이터 배열(필수) renderItem : 각 항목을 렌더링하는 함수, 각 아이템을 어떻게 표시할지 정의함.전달받는 props : item(객체), index(배열 인덱스 번호) 등keyExtractor : 각 항목의 고유한 키를 설정해 성능 최적화item, index를 props로 전달하고, 반..

리액트 네이티브에서는 내비게이션 기능을 지원하지 않아, 외부 라이브러리를 이용 -> 리액트 내비게이션n(React Navigation) 라이브러리화면 간의 전환을 관리하는 등에 사용. 8.1 리액트 네비게이션기본 세팅npx create-expo-app my-appcd navigationnpm install @react-navigation/nativenpm install styled-components리액트 내비게이션 라이브러리가 지원하는 내비게이션 종류 : 스택(stack) 내비게이션, 탭(tab) 내비게이션, 드로어(drawer) 내비게이션 내비게이션 구조Screen 컴포넌트 : 화면으로 사용되는 컴포넌트필요한 속성 : name(화면 이름), component(화면으로 사용될 컴포넌트)화면으로 사용되는..

Context API : 데이터를 전역적으로 관리하고 사용할 수 있게 하는 기능 7.1 전역 상태 관리전역 상태 관리가 없으면 생기는 문제점 : 부모 컴포넌트로부터 자식 컴포넌트에 props를 전달하고, 자식 컴포넌트는 데이터 변경 요청을 부모 컴포넌트로 전달해야 함. 이 과정은 컴포넌트 간의 깊이가 깊어질수록 복잡해짐.7.2 Context APIconst Context = createContext(defaultValue); Consumer상위 컴포넌트 중 가장 가까운 곳에 있는 Provider 컴포넌트가 전달하는 데이터를 읽고 사용함.만약, Provider 컴포넌트가 없다면 createContext 함수의 defaultValue를 사용함.// src/contexts/User.jsconst UserCon..

이전에는 컴포넌트의 상태를 관리하거나 생명 주기에 따라 특정 작업을 수행하려면 클래스형 컴포넌트를 사용해야 했음.하지만 Hooks를 이용할 수 있게 되면서 함수형 컴포넌트에서도 상태를 관리할 수 있게 되었고 컴포넌트의 생명 주기에 맞춰 특정 작업을 수행할 수 있게 됨. 6.1 useStateconst [state, setState] = useState(initialState);return : [변수, 세터 함수]세터 함수 : 변수를 수정할 수 있는 함수useState 함수는 관리해야 하는 상태의 수만큼 여러 번 사용할 수 있음.상태를 관리하는 변수는 반드시 세터 함수를 이용해 값을 변경해야 함 -> 상태가 변경되면 컴포넌트가 변경된 내용을 반영하여 재렌더링 됨. 세터 함수세터 함수에 변경될 상태의 값을 ..

본 실습 내용은 아래 깃허브에 자세히 작성하였습니다.https://github.com/studyReactNative/myTodo GitHub - studyReactNative/myTodoContribute to studyReactNative/myTodo development by creating an account on GitHub.github.com 목표 기능등록 : 할 일 항목을 추가수정 : 완료되지 않은 할 일 항목을 수정삭제 : 할 일 항목을 삭제완료 : 할 일 항목의 완료 상태를 관리 5.1 프로젝트 준비하기npx @react-native-community/cli init todocd todonpm install styled-components prop-types styled-components..

본 내용이 반드시 정답은 아닙니다. 제가 해결한 방법을 정리해두기 위함입니다.   내가 겪은 문제 상황리액트 네이티브 프로젝트를 처음 생성하고 styled-components를 설치하기 위한 명령어를 입력하였으나, 폴더를 따로 건드리지 않았음에도 오류가 생김.오류 메시지를 확인해본 결과, react와 react-dom의 버전이 안 맞아서 생긴 문제로 추정함. > npm install styled-componentspro p-typesnpm error code ERESOLVEnpm error ERESOLVE unable to resolve dependency treenpm errornpm error While resolving: myTodo@0.0.1npm error Found: react@18.3.1np..

4.1 스타일링리액트 네이티브에서는 JS를 이용해 스타일링함.컴포넌트에는 style 속성이 있고, 이 속성에 인라인 스타일을 적용하는 방법과 스타일시트(StyleSheet)에 정의된 스타일을 사용하는 방법이 있음. 인라인 스타일링: HTML의 인라인 스타일링처럼 컴포넌트에 직접 스타일을 입력하는 방식HTML 인라인 스타일링과 달리 문자열이 아닌 객체 형태로 전달해야 함. Inline Styling - Text비슷한 역할을 하는 컴포넌트에 동일한 코드가 반복될 수 있고, 어떤 이유로 해당 스타일이 적용되었는지 코드만으로 명확하게 이해하기 어려움. 클래스 스타일링: 스타일시트에 정의된 스타일을 사용하는 방식const App = () => { return ( Inline Styling - ..

특징ReactReact Native사용 목적웹 애플리케이션 개발모바일 애플리케이션 개발렌더링 방식가상 DOM 사용네이티브 컴포넌트 사용스타일링CSS 또는 CSS-in-JS 사용JS 스타일 객체 사용플랫폼웹 브라우저iOS, Android 렌더링 방식React의 가상 DOM VS React Native의 네이티브 컴포넌트React는 브라우저의 실제 DOM(Document Object Model)이 느려서 변경사항을 가상 DOM에서 먼저 계산한 뒤 실제 DOM에 필요한 최소한의 변경만 적용하는 방식으로 성능을 최적화함.React Native에서는 브라우저 DOM 대신 각 플랫폼의 네이티브 UI 컴포넌트(UIView, ViewGroup 등)를 직접 사용함.React Native는 브릿지를 통해 JS와 네이티브 ..