Lecture/React Native (8) 썸네일형 리스트형 React Navigation Hello React Navigation 웹에서는 a태그를 이용해서 쉽게 다른 페이지로 이동이 가능하다. 사용자가 링크를 클릭하면 해당 링크의 URL은 브라우저의 history 스택에 push된다. 사용자가 뒤로가기 버튼을 누르면, 브라우저는 현재 페이지를 stack에서 pop하고 그 아래에 있던 이전 페이지가 브라우저에 노출된다. 리액트 네이티브는 이와 같은 웹의 내부 기능을 사용할 수 없기 때문에 React Navigation과 같은 라이브러리가 필요하다. React Navigation의 네이티브 스택 네비게이터는 앱의 화면간 전환과 네비게이션 히스토리 관리 기능을 제공한다. 만약 하나의 스택 네비게이터만 사용한다면 웹과 개념적으로 비슷한 구조를 구축할 수 있다. React Navigation의 스택.. 2021-07-31 :: Typescript 내용 정리 자바스크립트에서 primitive는 객체도 아니고 메서드도 갖지 않는 값이다. 타입스크립트에서 type은 non-primitive 값이다. ts에서 타입을 지정할때 type이라는 키워드를 사용해서 지정한다. 컴포넌트의 속성 children은 ReactNode 타입이다. react로부터 import한 FC타입 안에는 children 속성이 이미 포함되어 있기 때문에 ReactNode 타입을 따로 지정해줄 필요는 없다. react에서는 ComponentProps라는 타입을 지원한다. 이 타입은 다음과 같은 구문을 통해 사용하는 제너릭 타입이고 컴포넌트의 속성 타입을 알아낼 수 있다. type TouchableOpacityProps = ComponentProps; react-native는 StyleProp 타.. React Native 시작하기 npx react-native init projectName npx react-native start npx react-native run-android npx react-native init projectName --template react-native-template-typescript npm start npm run android npx react-native init 명령어를 통해 프로젝트를 시작해도 터미널 상에서는 패키지등이 설치되는 듯 보였으나 디렉터리 안에 들어가보면 아무 파일이 없었다. 당연히 npm start 명령어도 먹히지 않았다. --template react-native-template-typescript 옵션을 추가했을 때, 파일은 생성되었으나 여전히 npm start 명령어를 .. 2021-07-18 :: React Native; Interaction Navigating Between Screens 모바일 앱은 보통 여러개의 화면으로 구성이 되어 있다. 여러개의 화면에 대한 표현과 전환은 navigator를 통해 컨트롤 한다. React Native Navigation installation npm install @react-navigation/native @react-navigation/stack npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view for iOS cd ios pod install cd .. react-native-g.. 2021-07-17 :: React Native; Design Style 리액트 네이티브에서는 JS를 이용해 어플리케이션을 스타일링한다. 모든 컴포넌트는 style이라는 prop을 가진다. style의 이름과 값은 카멜 표기법이 적용된다는 점을 제외하면 CSS와 흡사하다. 컴포넌트가 복잡해지면 아래 코드 컨벤션과 같이 StyleSheet.create를 이용하는 것이 편리하다. import React from 'react'; import { StyleSheet, Text, View } from 'react-native'; const LotsOfStyles = () => { return ( just red just bigBlue bigBlue, then red red, then bigBlue ); }; const styles = StyleSheet.create({ co.. 2021-07-17 :: React Native Official; The Basics https://reactjs.org/docs/forms.html#controlled-components Forms – React A JavaScript library for building user interfaces reactjs.org The Basics view 컴포넌트 안에 Text 컴포넌트를 삽입해서 사용한다. Using a ScrollView 스크롤링이 가능한 컨테이너이다. 스와이핑 제스쳐를 통해서 컨트롤이 가능하다. 데이터의 양이 스크린의 크기를 넘는다면 FlatList를 사용하자. FlatList는 데이터를 동적으로 로딩하여 최적화된 사용자 경험을 제공한다. FlatList의 사용 예시는 아래와 같다. } keyExtractor={(item, index)=> item.id} ItemSepa.. 2021-07-05 :: React Native 함수 컴포넌트와 리액트 훅 04-1 리액트 훅 맛보기 기존 클래스 컴포넌트를 구현할 때의 복잡함을 덜고자 컴포넌트를 함수 형태로 만들 수 있게 하였다. 또한, 함수 컴포넌트가 어떤 값을 유지할 수 있도록 새로운 개념의 데이터 캐시 시스템을 만들었다. 그리고 개발자로 하여금 이 새로운 데이터 캐시 시스템을 쉽게 사용할 수 있도록 접두사 use로 시작하는 여러 개의 API를 제공하며, 이 API를 리액트 훅 함수라고 이름 붙였다. 클래스 컴포넌트는 너무 많은 기능이 숨겨져 있고, 라이프사이클 매서드 역시 복잡하다. 이를 극복하고자 리액트 훅이 탄생했다. 리액트 훅을 사용하여 어떤 컴포넌트를 구현한 다음 구현 로직을 커스텀 훅으로 만들면 비슷한 기능이 필요한 다른 컴포넌트를 구현할 때 그냥 가져다 쓰면 된다. 리액트 훅 사용시 주의해야.. 2021-07-05 :: React Native 개발환경 + 기본 01 리액트 네이티브 개발 환경 갖추기 모바일 앱 개발에서 네이티브라는 단어는 운영체제를 만들 때 사용한 프로그래밍 언어와 똑같은 언어로 만든이라는 뜻이다. 안드로이드는 자바로, iOS에서는 Objective-C로 만든 앱을 네이티브 앱이라고 한다. 리액트 네이티브는 크로스플랫폼 개발 프레임워크이며, 네이티브 파트와 자바스크립트 파트로 나누어진다. 브릿지 방식 안드로이드 앱은 자바로 구현된 안드로이드 프레임워크를, iOS 앱은 Objective-C로 구현된 iOS UIKit 프레임워크를 사용하여 만든다. 두 프레임워크 모두 'View'자가 들어간 많은 클래스를 제공한다. 리액트 네이티브는 웹 브라우저에서 자바스크립트 엔진 부분만 떼어 내어 자바스크립트 코드로 구현된 'View' 클래스를 네이티브 쪽 안드.. 이전 1 다음