[1강] 배달앱 클론코딩[with React Native]

1. 리액트 네이티브 

learn once, write anywhere 

=> 한번 배워서 여러군데서 쓰자

=> 한번만 쓰면 어느곳에서나 돌아간다는 의미가 아님

=> 실무에서는 안드로이드와 맥을 따로 개발해야함

2. 리액트 네이티브(React Native) vs 플러터(Flutter)

=> 리액트를 아는 사람이라면 플러터에 비해 러닝커브 낮음

=> 리액트 네이티브의 코드 푸쉬 기능(앱을 껐다가 키면 자동으로 업데이트)

=> 트렌드는 플러터이지만 아직 리액트도 많이 사용됨

3. 환경설정

1) expo vs react-native cli

=>많은 강좌들이 expo로 되어있지만, 비추천, 복잡한 앱을 만들기위해서는 결국 cli로 전환을 해야함

2) mac으로는 andrioid, ios 둘 다 개발이 가능하나 window에서는 android만 개발이 가능하다

3) 환경 설정의 경우 react-native app의 공식 문서를 그대로 따라하면 됨

4)Android Manager: virtual device의 경우 galaxy폰들은 많이 없고 pixel,nexus등이 대부분, nexus5추천, 갤럭시 폴드도 확인 가능 =>화면 작은 것 + 특이한 것(갤럭시 폴드)을 기준으로 작업하고 나중에 큰화면으로 확인하는 것이 좋다

 

4. 기본 구조

1)ios, android는 native folder 왠만하면 건들지 않는 것이 좋다

2)watchman은 파일 감시 기능 윈도우는 해당사항 없음

3)app.json 앱 이름 정하기

4)barbel: 웹팩 대신 메트로 서버

5)index.js: 파일의 시작점 => app.tsx

 

5. 코딩 시작 팁

1)공식문서를 확인

2)맥에서 먼저 개발 => 나중에 안드로인드 기준으로 개발

3)app.json의 name을 나중에 바꾸는 매우 어려우니, 처음에 셋팅을 잘하자

4)하나의 파일에 여러개의 컴포넌트를 넣는 것을 피하자

 

6. 스타일링

1)웹서비스 화면은 웹과 완전 다르게 따로 그려야 함(앱은 웹과 완전히 다름)

2)일반적인 경우에는 stylesheet.create를 사용하고 변수가 들어가는 경우에 inline스타일을 사용

3)퍼센트는 가능하지만 px 사용 불가능 , 단위 생략시 해상도를 반영한 안드로이드의 단위인 dip를 의미

4)camelCase 사용

5)축약 안 됨(border:"1px solid red"=>borderWidth, borderColor,... 풀어서 정의)=>PaddingVertical, PaddingHorizontal등으로 가로,세로씩 합치는 것은 가능

6)웹과 달리 앱은 기본이 세로(flex)

7)스타일에 배열을 넣는 방식이 가능함

style={[ styles.sectionTitle, { color: isDarkMode ? Colors.white : Colors.black, }, ]}>

8)텍스트 컬러를 변경하기 위해서는 상위 View태그에 color을 적용하지 말고 반드시 Text태그에 직접 적용

9)flex와 요소 배치

    (1)flex: 요소간의 세로 비율을 의미

    (2)alignItems:가로 중앙 정렬(웹과 반대)

    (3)justifyContents:세로 중앙 정렬(웹과 반대)

 

7. 컴포넌트

1)텍스트는 반드시 <Text>태그로 감싸주어야 함

2)<SafeAreaView>는 노치, 홀 등을 죽은 공간으로 만들어 버리는 기능을 해 줌, 최상단을 감싸줌

=>NavigationContianer 이용시 이미 적용이 되어 있어서 굳이 따로 적용할 필요 없음

3)<StatusBar>:배터리등 표시되는 공간, 높이등을 계산...

4)<ScrollView>: 자동으로 스크롤이 되게 해줌, 콘텐츠가 많은 경우에는 성능 문제로 <FlatList>사용

 

8. DebuggingTool : Flipper

1) 앱은 앱스토어 거쳐서 배포, 웹뷰는 실시간으로 고치는 것이 가능함=> 웹뷰를 통해 성능 문제 개선

2) 메트로서버 단축키

-r: reload 새고로침

-d: debugger 메뉴 오픈, 퍼포먼스 모니터 체크 시 => 애니메이션 확인시 유용함

3) localhost:8081의 debug mode:네트워크 요청 등 안됨 => flipper 사용

4)flipper(중요!!)

=> setting에서 android sdk 파일 경로를 제대로 설치를 해줘야하는데 뭔가 잘 안됨

=> 다음에 다시 한번 더 시도해보기!

=> 일단은 console.log를 찍어서 에러 확인을 하는 식으로!!

 

 

9. 앱 이름 변경

1)app.json에서 displayName 변경하기

2)android >app >src>main>res>values>strings.xml 변경

3)ios>fooddeliveryapp>info.plist>CFBundleDisplayName의 string값 변경

4)네이티브 코드 수정시 재실행 필요 이때, 메트로 서버에 캐시가 남아있을 수 있음=> 메트로 서버 종료 후 npm run android 실행

 

10. 폴더 구조

1)src 폴더 생성: 자바스크립트 폴더

(1)assets:font, image...

(2)constants:상수들

(3)pages:페이지들

(4)components:페이지 내부의 세부 컴포넌트들

(5)hooks

(6)modules:네이티브 모듈

(7)store:리덕스 스토어

(8)slice:리덕스 슬라이스

 

2)types 폴더 생성:타입 정의

 

11. 라우팅 처리 : 리액트 내비게이션

웹에서는 라우팅 기능을 사용하기 위해 react-router-dom을 이용하는 것이 일반적이고, react-router-native로 앱 개발에서도 사용하는 것이 가능하나, 리액트 내비게이트가 좀 더 앱개발에 걸맞는 기능을 가지고 있기 때문에 리액트 내비게이션으로 라우팅 처리

1) 모듈 설치

npm i @react-navigation/native @react-navigation/native-stack
npm i react-native-screens react-native-safe-area-context

 

 

2) java code 수정

android>app>src>main>java>com>fooddeliveryapp>MainActivity.java

import android.os.Bundle;
@Override protected void onCreate(Bundle savedInstanceState){ super.onCreate(null); }

위의 코드 추가

 

 

3)리액트 내비게이터

(1) 기본 코드

const App =()=>{
return(
	<NavigationContainer>
		<Stack.Navigation initialRouteName="Home">
    		<Stack.Screen
            	name="Home"
                component={HomeScreen}
                options={{title:"Overview}}
                //props가 없는 경우
            />
            <Stack.Screen name="Details">
            {props => <DetailsScreen {...props}
            //props가 있는 경우
            />}
            </Stack.Screen>
		</Stack.Navigation>
	</NavigationContainer>
	)
}

 

-Stack/Drawer/Tab : 리액트 내비게이터에서만 사용 가능

 

(2) 화면 전환 방법

const onClick = useCallback(()=>{
	navigation.navigate("Home");
},[navigation])

 

12. 버튼 : 6 종류의 버튼이 존재 

1)Touchablehighlight : underlayColor 조절 가능

2)TouchableOpacity

3)Pressable : 안드로이드와 맥에 같은 디자인을 적용하기 위해 Pressable/withoutFeedback을 사용하는 것이 좋음

4)Button

5)TouchableWithoutFeedback

6)TouchableNativeFeedback

 

13. 라우트 Params 

type RootStackParamList={
	Home:undefined;
    Details:undefined;
};

type HomeScreenProps = NativeStackScreenProps<RootStackPAramList, "Home">;
type DetailScreenProps= NAtiveStackScreenProps<ParamListBase,"Details">;