* React Native
- 리액트 네이티브는 페이스북이 만든 오픈소스 모바일 애플리케이션 프레임워크
- 리액트로 웹 애플리케이션을 개발할 수 있다면, 리액트 네이티브로 모바일 앱을 개발할 수 있음
- Node.js, JDK, 안드로이드 스튜디오, 파이썬 설치 필요
- Scoop으로 설치한 프로그램은 scoop update * 명령으로 한꺼번에 최신 버전으로 업데이트 가능
○ Scoop 설치
§ 관리자 모드 터미널에서 Set-ExecutionPolicy RemoteSigned -scope CurrentUser
§ $env:SCOOP='C:\Scoop'
§ 환경변수 설정 후
§ iex "& {$(irm get.scoop.sh)} -RunAsAdmin" 명령 실행
- Import React from 'react'; 로 리액트 불러와서 사용
- Import {TouchableOpacity, Text} from 'react-native'; 로 리액트 네이티브에서 제공하는 컴포넌트 임포트
- React-device-detect(반응형 웹 제작)
○ 패키지 하나 설치만으로 쉽게 데스크톱, 모바일 뷰 접속 가능
○ Npm install -g react-device-detect(-g 없이 설치하면 해당 폴더에서만 사용할 수 있도록 패키지가 설치됨)
- Import {Platform} from 'react-native'
Console.log(Platform.OS) (실행 OS 확인)
- Import {Dimensions} from 'react-native'
Const {width, height}= Dimensions.get('window') (현재 실행된 폰의 크기 확인)
=> 스타일 적용시 변수 사용 가능
• 장점
- 작성된 코드 대부분이 플랫폼 간 공유가 가능해서 두 플랫폼을 동시에 개발 가능
- 웹의 FE로 리액트를 사용하고 앱 개발에 리액트 네이티브를 사용한다면, 80~90% 이상 서로의 소스코드 공유 가능
- 자바스크립트와 HTML의 조합
- 변경된 코드를 저장하기만 해도 자동으로 변경된 내용이 적용된 화면을 확인할 수 있는 패스트 리프레쉬 기능 제공
- 코도바나 아이오닉은 웹뷰를 이용하여 렌더링하는 방식으로 성능이 떨어짐
- 크로스 플랫폼 개발 프레임워크 종류: 타이타늄, 네이티브스크립트, 뷰네이티브, 플러터
• 단점
- 새로운 기능 사용하는 데 시간 오래 걸림
- 유지보수의 어려움
- 잦은 업데이트
• 동작 방식
- 브릿지: 자바스크립트 코드를 이용해 네이티브 계층과 통신할 수 있도록 연결하는 역할을 하는 브릿지 존재
- 가상 DOM: 데이터가 변할 경우 자동으로 화면을 다시 그림
*실제 DOM은 우리가 보는 화면에 나타나는 DOM이고, 가상 DOM은 화면에 보이지 않지만 비교를 위해 존재하는 DOM
○ Console.log 호출은 가상 DOM 객체를 반환하지 않음
• 프로젝트 만들기
- Expo: 완성된 프로젝트를 쉽게 배포 및 관리할 수 있도록 다양한 기능 제공
○ Expo에서 제공하는 API만 사용 가능하고 필요한 기능이 제공되지 않을 경우 네이티브 모듈을 추가로 만들어서 사용하는 것이 불가능함
○ Npm install --global expo-cli 설치 후 expo init my-first-expo로 프로젝트 생성
- 리액트 네이티브 CLI: 리액트 네이티브 CLI에서는 필요한 기능이 있을 경우 모듈을 직접 만들어 사용 가능하지만 Expo에 비해 배포가 불편하고 초심자에게 어려움
○ Npx react-native init MyFirstCLI로 프로젝트 생성 후 cd MyFirstCLI-> npm run android 프로젝트 폴더로 이동해서 프로젝트 실행
○ Metro는 리액트 네이티브를 위한 자바스크립트 번들러로서 리액트 네이티브가 실행될 때마다 자바스크립트 파일들을 단일 파일로 컴파일하는 역할을 함
- 실제 시작 파일을 변경하는 방법도 있지만, 그 방법보다는 첫 화면을 구성하는 파일만 변경하고 리액트 네이티브에서 사용되는 파일을 모두 src 폴더에서 관리하는 방법을 추천-> src 폴더에서 파일을 관리하고 App.js 파일을 첫 화면 파일로 이용
• JSX: 자바스크립트 확장 문법으로 XML과 매우 유사(Javascript+XML)
- 하나의 부모: JSX에서는 여러 개의 요소를 표현할 경우 반드시 하나의 부모로 감싸야 함
- 자바스크립트 변수: JSX는 내부에서 자바스크립트의 변수를 전달하여 이용 가능
- 자바스크립트 조건문: if조건문, 삼항 연산자, AND 연산자와 OR 연산자(JSX에서는 false는 렌더링되지 않음), null과 undefined(null은 허용하지만 undefined는 오류 발생), 주석({/* */ 이용})
- 스타일링: JSX에서는 HTML과 달리 style에 문자열로 입력하는 것이 아니라 객체 형태로 입력해야 함
- XML 구문을 따르므로 컴포넌트 간의 부모/자식 관계 표현 가능
○ Const virtualDOM=<SafeAreaView><Text>Hello</Text></SafeAreaView>
- Or 변수에 담는 과정을 생략하고 함수의 반환값으로 사용 가능
○ Export default function App() {
Return <SafeAreaView><Text>Hello</Text></SafeAreaView>
§ Return 키워드 없이 값을 반환하는 구문을 타입스크립트나 ESNext 자바스크립트에서는 표현식이라 함
- 배열을 JSX 문으로 만들 때 조심할 점
○ 반드시 부모 컴포넌트의 자식 컴포넌트 형태로 작성
*return <SafeAreaView>{Children}</SafeAreaView>
○ 데이터 배열을 컴포넌트 배열로 만들기
*const children=[1,2,3].map((i) => <Text>Hello {i}</Text>
Return <SafeAreaView>{children}</SafeAreaView>
• 컴포넌트
- 컴포넌트는 여러 개의 속성과 하나 이상의 자식 컴포넌트를 가질 수 있음
- 컴포넌트는 재사용할 수 있는 조립 블록으로 화면에 나타나는 UI 요소로 부모로부터 받은 속성이나 자신의 상태에 따라 표현이 달라지고 다양한 기능 수행
- View는 UI를 구성하는 가장 기본적인 요소로 웹 프로그래밍에서 <div>와 비슷한 역할을 하는 컴포넌트
- 여러 개의 컴포넌트를 반환하고 싶은 경우에는 Fragment 컴포넌트 사용
- Button 컴포넌트는 IOS와 안드로이드에서 다른 모습으로 렌더링된다는 단점을 보완하기 위해 TouchableOpacity 컴포넌트와 Text 컴포넌트를 이용
- 리액트로 만들어진 웹페이지는 모든 화면을 컴포넌트 별로 나눠서 작업 가능
- 함수형 컴포넌트, 클래스형 컴포넌트로 구분
○ Functional component: useState, useEffect, useRef, useNavigate 등의 Hook이라는 기능을 이용하여 활용
○ 함수 안에 사용할 변수나 함수를 구현하고 return() 값 안에 html 태그들을 넣은 다음 {}로 함수 내에 선언된 state, prop, hook, 변수 등을 참조하여 활용할 수 있음
○ 클래스 컴포넌트: export default class App extends Component{
Render() {retrun null}
○ 화살표 방식 함수 컴포넌트: const ArrowComponent =() => {
Return null
}
Export default ArrowComponent
=> 클래스 컴포넌트는 Component 클래스를 상속해야 하고 render 메서드를 구현해야 하는 등 이것저것 알고 있어야 할 것이 많지만 함수 컴포넌트는 단순히 JSX 구문을 반환한다는 정도만 알면 충분함, 함수 컴포넌트는 리액트 훅 기능 사용 가능
- 속성이란? 리액트와 리액트 네이티브에서 속성은 '클래스 속성+재렌더링'
○ 모든 속성은 따옴표로 감싸야 함
○ String 타입과 달리 number 타입은 속성값을 설정할 때 중괄호{} 기호로 감싸야 함
○ 속성값이 객체일 때: <Person person={{name: 'Jack', age: 22}} />
○ 속성은 부모 컴포넌트가 자식 컴포넌트 쪽으로 데이터를 전달하고 싶을 때 사용
- 이벤트 속성과 이벤트 처리기
○ Button 코어 컴포넌트: onPress, title, color 속성 제공
*<Button title="home" color="blue" onPress{()=> console.log('home pressed.')} />
○ Alert API
*static alert(타이틀, 메시지)
○ Touchable~ 코어 컴포넌트: 터치가 일어났을 때 시각 효과 적용
*TouchableOpacity, TouchableHighlight
○ Text 코어 컴포넌트
○ TextInput 코어 컴포넌트
§ defaultValue 속성에 속성값 설정 가능
§ 입력된 텍스트는 value 속성값으로 얻을 수 있음
§ 텍스트가 입력될 때 onChangeText 이벤트 처리기 실행
§ Placeholder 속성을 사용하여 어떤 값을 설정해야 하는지 문자열로 출력 가능
§ Editable 속성값에 false를 설정하면 입력 불가능
§ keyboardType 속성, focus 속성
§ 자식 요소를 가지지 못함
- 코어 컴포넌트 종류
○ View
○ ScrollView
§ contentContainerStyle 속성 제공
○ FlatList
○ SafeAreaView
○ KeyboardAvoiding
○ ImageBackground
§ 항상 source 속성에 require를 사용하여 읽는 방식으로 파일 설정
§ 반드시 width, height 설정
○ Image
§ 자식 컴포넌트를 가질 수 없음
○ Text
○ TextInput
○ Button
○ Icon
- 재사용할 수 있는 컴포넌트: 하나의 목적에만 부합하는 것이 아니라 어떤 패턴의 코드에 항상 적용할 수 있는 사용자 컴포넌트
○ TouchableView
§ React: ComponentProps 타입
*import type {ComponentProps} from 'react'
Type TouchableOpacityProps= ComponentProps<typeof TouchableOpacity>
§ React-native: StyleProp 타입
*import type {StyleProp, ViewStyle} from 'react-native'
viewStyle?: StyleProp<ViewStyle>
○ IconText
• 화살표 함수
- 화살표 함수는 ES6의 문법으로 function 키워드를 사용하는 것보다 간단하게 구현 가능
- 화살표 함수는 변수나 상수를 선언하여 정의하는 함수로 const ()=>{}로 표현됨
• 이벤트
- Press 이벤트: 버튼을 만들 때 사용하는 TouchableOpacity 컴포넌트에서 설정할 수 있는 Press 이벤트의 종류는 총 4가지
○ onPressIn: 터치가 시작될 때 항상 호출
○ onPressOut: 터치가 해제될 때 항상 호출
○ onPress: 터치가 해제될 때 onPressOut 이후 호출
○ onLongPress: 터치가 일정 시간 이상 지속되면 호출
- Chage 이벤트: 변화를 감지하는 chage 이벤트는 값을 입력하는 TextInput 컴포넌트에서 많이 사용
- Pressable 컴포넌트: TouchableOpacity 컴포넌트를 대체
○ HitRect와 PressRect 지원
• 컴포넌트 스타일링
- 스타일 속성은 컴포넌트의 style 속성에 설정되는 객체의 속성=> 스타일 객체
- 인라인 스타일링: 컴포넌트에 직접 스타일을 입력하는 방식
○ Style 속성 설정값이 배열이면 배열 안의 스타일 객체를 모두 결합하여 하나의 스타일 객체로 만들어줌
○ 바탕색은 이름에 'View' 들어간 컴포넌트로, 글자 색상은 Text로 구현
- StyleSheet API 클래스 스타일링
○ Const styles=StyleSheet.create({
키이름1:스타일객체1,
키이름2:스타일객체2
})
=> 정적 스타일은 객체는 StyleSheet.create 방식으로 구현, 동적 스타일 객체는 인라인 스타일 방식으로 구현
- 타입스크립트 문법은 height:height 처럼 속성 이름과 값을 담은 변수 이름이 같을 때는 값을 담은 변수 부분을 생략 가능
- Width, height 스타일 속성으로 View 크기 설정 확인
○ Flex:1 == height:'100%'
- Margin 스타일 속성: 부모/자식 간 혹은 이웃한 형제 요소 간의 간격 조정
- Padding 스타일 속성: 부모/자식 간의 관계에서 부모 컴포넌트 쪽에 적용하는 스타일 속성
- Border 관련 스타일 속성
○ borderWidth, borderColor, borderRadius, borderStyle
- Platform.select 메서드: 운영체제별로 다른 값 적용
○ paddingLeft: Platform.select({ios:0, android:20})
- 폰트 사용하기
○ FontFamily 스타일 속성
*리액트 네이티브는 CSS와 달리 부모 요소에 텍스트 관련 스타일 속성을 지정 불가능
○ fontWeight 스타일 속성
○ TextAlign 스타일 속성
- flexDirection 스타일 속성
○ 부모 컴포넌트의 크기가 고정일 때 자식 컴포넌트를 자신의 영역에 배치하는 기법
○ Row와 column으로 조정 가능
- alignItems 스타일 속성
○ 부모 요소의 높이나 넓이에 여분이 있을 때 이 여분을 이용하여 자식 요소의 배치 간격을 조정하는 데 사용
- justifyContent 스타일 속성
○ Flex-start, center, flex-end, space-around, space-between, space-evenly
- flexWrap 스타일 속성
○ Nowrap, wrap, wrap-reverse
- Overflow 스타일 속성
○ Visible, hidden, scroll
- ScrollView의 contentContainerStyle 속성
○ Flex: 1 부분이 없어야 스크롤 정상 작동
- FlatList 스타일 속성
○ 똑같은 컴포넌트를 여러 개 렌더링할 때 사용
○ Data, renderItem, keyExtracter, ItemSeparatorComponent 속성:
<FlatList data={people} renderItem={({item}) => <Person person={item} />} keyExtractor={(item, index) => index.toString()} ItemSeparatorComponent={() => <View style={styles.itemSeparator} />} />
- Floatingactionbuttom 스타일 속성
○ Position, left, right, top, bottom과 같은 스타일 속성과 리액트가 제공하는 Fragment 컴포넌트 이해 필요
• 리액트 훅(리액트가 제공)
- 리액트 훅이란? 함수 컴포넌트가 어떤 값을 유지할 수 있도록 새로운 개념의 데이터 캐시 시스템을 만들었는데 접두사 'use~' 로 시작하는 여러 개의 API 함수로 만든 형태
- 클래스 컴포넌트 구현의 복잡함과 모호함을 극복하고자 개발
- 컴포넌트 데이터 관리
○ useMemo
○ useCallback
○ useState
§ useState가 반환하는 set함수는 값이 바뀌면 자동으로 해당 컴포넌트를 재렌더링함
§ Const [현재값, set함수]= useState(초기값)
Set함수= (새로운값): void
§ 객체를 만들어 줄 때는 as로 타입 변환을 해줘야 함 or 초기값 세팅
○ useReducer
§ Export function reducer: Reducer<AppState, Action>() {}
- 컴포넌트 생명주기 대응
○ useEffect
§ 의존성 목록에 있는 조건 중 어느 하나라도 충족되면 그때마다 콜백 함수 다시 실행
§ useEffect(콜백함수,의존성목록)
콜백함수=() =>{}
○ useLayoutEffect
- 컴포넌트 간의 정보 공유
○ useContext
- 컴포넌트 메서드 호출
○ useRef
§ DOM 또는 값을 가질 수 있음
○ useImperativeHandle
- 커스텀 훅: 개발자가 직접 만드는 훅
- 사용시 주의사항
○ 같은 리액트 훅을 여러 번 호출 가능
○ 함수 컴포넌트 몸통이 아닌, 몸통 안 복합 실행문의 {}에서는 호출 불가능
○ 비동기 함수(async키워드 함수)는 콜백 함수 사용 불가능
- 오늘 날짜와 현재 시각 출력
○ Const time= new Date
Time.toLocalDateString()
Time.toLocalTimeString()
○ setInterval 함수로 시계 만들기: 갱신 주기마다 콜백 함수를 계속 호출
Let time= new Date()
Const duration= 1000 // 1초를 의미
Const id= setInterval(() => {
Time= new Date() // 현재 시각을 1초마다 갱신
}, duration)
• Props와 state
- Props: 부모 컴포넌트로부터 전달된 속성값 혹은 상속받은 속성값
○ 부모 컴포넌트가 자식 컴포넌트의 props를 설정하면 자식 컴포넌트에서는 해당 props를 사용할 수 있지만 변경하는 것은 불가능함
- State: props는 부모 컴포넌트에서 받은 값으로 변경할 수 없는 반면, state는 컴포넌트 내부에서 생성되고 값을 변경할 수 있으며 이를 이용해 컴포넌트 상태를 관리
○ UseState: 함수형 컴포넌트에서 상태를 관리할 수 있도록 해줌->상태를 관리하는 변수와 그 변수를 변경할 수 있는 세터함수를 배열로 반환함
*const [저장할 state 변수, setState용 함수명]=useState(Type);
○ UseEffect: 배열 내에 있는 변수들의 값이 변경되면 UseEffect 내에 선언된 함수가 실행됨 []빈 배열로 두는 경우 컴포넌트가 생성될 때 한번만 실행됨
○ UseNavigate: Router를 이용하여 다른 페이지로 이동시킬 때 사용함
• JWT 로그인 인증방식
- Access Token
○ 엑세스 토큰은 JWT(JSON Web Token)를 주로 사용
○ 클라이언트로 발행 가능
○ 일정 시간 뒤에 자동으로 만료됨
○ 생성 증명 가능
○ JSON 타입으로 변수 정보 저장
○ 서버에서 쿼리하지 않아도 사용자를 로컬에서 검증할 수 있기 때문에 API 호출의 횟수를 줄임
○ 세션 상태를 저장하는게 아니기에 클라이언트는 Access Token을 헤더에 실어 서버로 보내야 함
○ 토큰 구조는 Header(암호화 할 방식과 타입 지정), Payload(토큰에 담을 정보-사용자의 ID, 유효기간), Signature(Base64 방식으로 인코딩 한 Secret Key를 합친 후에 토큰 생성)로 나눠짐
• React와 React Native의 차이점
• React interface 선언
- ReactNode, ReactChild, ReactElement 사용시 주의사항
○ 해당 타입은 object를 받을 수 없음
○ ReactNode는 런타임에서 에러 확인 가능
○ ReactChild, ReactElement는 컴파일타임에서 에러 확인 가능
○ Type VS interface
§ Interface는 객체로 취급하기 때문에 충돌 발생X
§ Type는 충돌 발생O
§ Interface는 타입 머지시 에러를 발생하며 props 변수에서 어느 지점에서 에러가 발생했는지 알려줌
• HTTP Method
- PUT: 리소스의 모든 것을 업데이트함
- PATCH: 리소스의 일부를 업데이트함
개발/React