expo와 cli는 expo에서 제공하는 기능이 많지만, 커스텀이 어려워 cli로 시작하는 경우가 많음.
npx react-native init FoodDeliveryApp --template react-native-template-typescript
FoodDeliveryApp을 생성하는데, 템를릿은 타입 스크립트로 한다.
npm run android 가 바벨 서버라고 생각하면 될 정도로 기본적으로 필요한 것임.
바벨 대신 메트로가 쓰임 webpack dev server 대신 메트로 dev server가 있다는 것 정도.
Error listen address already in use 8081같은 경우에는 8081 포트를 또 쓰는 경우임. 이 부분 주의 필요
ADV 는 화면을 작은 걸로 시작하거나, 특이한 걸로 시작하는게 좋음. 그래야 덜 깨짐. 폴드, nexus 5 가 좋음
타입스크립트는 strict : true 로 하는 것. tsconfig.json 에 있음
안드로이드 기준으로 시작해 IOS로 보면 많이 깨지지만 IOS로 시작해 안드로이드로 오면 많이 깨짐.
app.json에 있는name은 처음에 잘 짓는걸로 하기. display name은 바꾸기 쉽지만 그냥 name은 좀 귀찮음 앱 이름으로 매칭을 하기에 안드로이드, ios를 바로 시작하는게 있기에 머리아픔
JS컴포넌트를 IOS, android에 올린다는 느낌으로 생각하면 됨.
리액트 컴포넌트는 styledsheet 써도 됨. 그렇게 큰 차이가 없음
항상 타입스크립트 코드는 밑부터 시작함.
리액트 네이티브는 flex 기반이고, css기반임. 웹과는 좀 다름
화면 단은 다 새로 만들어야 하지만, 리덕스는 같이 쓸 수 있다는 것 정도가 있음
css는 객체로 보통 많이 처리함
const backgroundStyle = {
backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
};
const styles = StyleSheet.create({
sectionContainer: {
marginTop: 32,
paddingHorizontal: 24,
}});stylesheet.create는 성능적으로 훨씬 좋기에 이렇게 사용하는게 좋음. styles.sectionContainer로 접근 가능
그렇기에 변수가 들어가는 경우에는 inline 으로 쓰는게 좋음
px 단위가 아니고, %가 되는 경우도 있고, 그런게 있음. 단위 생략시 dp 라는 단위가 있음 그냥 화면에 최소 비율 정도 느낌 %와 다른 점은 dip는 해상도에 따라 어떤 경우에도 동일하지만 %는 핸드폰 비율임.
camelCase라는 점.
각자 다 풀어 써야 됨. border: 1px solid black이런거 안됨 다 따로 써야됨.
어떤 코드가 안 되고, 되는지는 공식문서에 없기에 타입스크립트로 자동완성을 쓰거나, cheetsheet 를 찾아서 써야됨
flex direction이 기본적으로 column같은 많은 차이가 있기에 잘 찾아야 됨
import {View, Text} from 'react-native'를 가장 많이 씀
느낌상 view는 div, text는 span과 비슷하지만 또 다르다.
<View> 텍스트 </View> 이렇게 적으면 안 되고, 무조건 안에 Text로 감싸줘야 됨.
view면 가려지는 부분도 있기에 머리가 아픔. hole, notch가 실제로는 볼수 없지만 보이는 것으로 처리가 됨.
safe area view 는 문제가 되는 부분을 다 제외하고 실제로 볼 수 있는 곳에서 처리를 해주기에 최상단에 SafeAreaView로 모든 기기에 가려지는 부분 없이 처리 가능
status bar는 배터리 표시, 그런 것들 처리할 때 StatusBar로 처리하거나, 그 높이를 구할 때도 많이 씀
ScrollView는 실제 공간보다 컨텐츠가 많기에 스크롤을 쓰는데, view면 그냥 짤려버리기에 ScrollView로 써서 스크롤이 가능하게 만들어 줘야됨. 단점은 성능이 떨어짐.(Flat List라는 걸 씀)
하나의 파일에 여러 컴포넌트 넣는 것은 무조건 따로 분리해서 써라.
<Text
style={[
styles.sectionTitle,
{
color: isDarkMode ? Colors.white : Colors.black,
},
]}>
{title}
</Text>이렇게 복잡한 것도 배열안에 넣는 등 여러가지 것들이 가능함. 조건문은 StyleSheet가 안되기에 인라인으로 써야됨.
타입스크립트로 바꾸는 거는 새로 껍데기 만들어 놓고, 하나하나 코드 옮기는 방식으로 처리하기.
리액트 네이티브 네임 변경 같은 것들은 소스 코드를 직접 찾아서 뜯는 것들이 많기에 많이 늘긴 함. 라이브러리들이 잘 안돌아감 patch package로 직접 라이브러리 고치는 것도 가능함.
웹뷰를 쓴다. app은 항상 앱 스토어를 거쳐서 바뀌기에 웹뷰를 이용해 실시간으로 처리를 함.
퍼포먼스 모니터로 몇 프레임인지 확인이 가능하지만 실제 기기로 확인할 필요는 있음.
d 눌러서 보고 나서, debugger보면 크롬에 콘솔 로그로 볼 수 있지만 구림. 네트워크 요청이 전혀 안 뜸. 리덕스 데브툴즈도 못 씀. flipper라는 디버거를 사용함.
flipper때문에 에러가 나서 오히려 고통 받는 경우도 있음
setup doctor 좌하단에서 openssl이 설치 되었는지 보기.
flipper에 async-storage, redux-debugger, 이렇게 2개
async-storage는 local storage같은 개념. redux-debugger는 redux 보기.
리액트 네이티브 버전 문제는 --force 로 npm i 시 처리 가능.
이름 바꿀 때 app.json에 name을 바꿀 경우 ~~~com/name이 있음. 다른 사람이 쓰고 있으면 name을 바꿔야 됨. 그때 머리 아플 수 있음
내부 코드가 바뀌면 꼭 메트로 서버 재시작 하기.
react-router과 react navigation과 비슷함.
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen
name="Home"
component={HomeScreen}
options={{title: 'Overview'}}
/>
<Stack.Screen name="Details">
{props => <DetailsScreen {...props}/>}
</Stack.Screen>NavigatorContainer 을 쓰면 그 안에서 네이베이터가 사용 된다는 것이고,
Stack.Navigator은 홈이라는 그룹 안에다가 스크린을 묶어둔다는 느낌이면 됨.
Screen이 페이지 임.
모양이 다른 이유는 props를 넣어야 하는 경우가 있는 경우 아래를 씀. 없으면 위를 쓰면 됨
initialRouteName 에 있는 screen이 가장 메인이고, 뭔가를 하면 Detail로 넘어감. 이런식으로 다 배치를 해 둬야됨.
대충 구조는
function Stack(){
return <View> </View>
}
function Navigator(){
return <View> </View>
}
Stack.Navigator=Navigator 이런 식으로 되어 있음.
stack은 App 밖에서
const Stack = createNativeStackNavigator();이렇게 불러서 씀.
flex:숫자 는 style에 넣는데, 이 부분 처리는 숫자의 비율만큼 차지한다는 의미.
justify-content:center는 세로 중앙 정렬임. div의 세로 중앙 정렬 느낌으로 받아들이면 됨. align과 justify가 서로 반대라는 점.
TouchableHighlight,Pressable, Button, TouchableOpacity, TouchableNativeFeedback,TouchableWithoutFeedback 이렇게 6개의 버튼이 가능한데 차이점은 직접 눌러보며 파악해볼 수 있음.
TouchableHighlight 인 경우에 underlayColor을 지정해 누를 때 색 지정 가능. onPress로 onClick과 같은 역할을 할 수 있음. 웬만하면 pressable쓰는게 좋음.
버튼 크기는 padding으로 조절 가능.
Pressable에서 color:white는 텍스트가 안됨. 직접 text에 style로 줘야 됨. 이런 것들을 주의해야 함.
padding-left, padding right 합치면 paddingHorizontal, top,bottom은 Vertical로 합칠 수는 있지만 padding:20 40 은 안됨.
navigation.navigate('Home'); 으로 특정 이름을 가진 screen으로 갈 수 있음.
component={HomeScreen} 이렇게 되어있는 컴포넌트 안에 navigation과 router라는 것을 props로 전달해줌.
{props => <DetailsScreen {...props} />}이렇게 screen생성 방법중 2번째에 보면 props라는 걸 받아서 넘기는 방식으로 처리하는데, 이때 navigation, router가 전달됨. 1번 방식은 자동으로 처리됨
flex-direction이 wrap의 유무도 바꾼다는 점 정도가 있음
react-navigation의 타입은 따라서 쓰는 방법밖에 없음. 그냥 라이브러리 만든 사람이 정한 거.
type HomeScreenProps = NativeStackScreenProps<RootStackParamList, 'Home'>;
type DetailsScreenProps = NativeStackScreenProps<ParamListBase, 'Details'>;
이렇게 만든다는 것 정도가 있음
항상 파라미터 타입은 공식 문서 찾고 가야됨.typechecking이라고 검색하면 공식 찾기가 그나마 쉬움. 그냥 외워라.
