TIL_230103_ React Native 심화

정윤숙·2023년 1월 3일

TIL

목록 보기

64/192

내일배움캠프 4기 스파르타코딩 React B반

📒 오늘의 공부

1. React Native 심화 강의

알게 된 것

터미널에서 expo 프로젝트 만들고 연결하기
yarn create expo-app AwesomeProject
- vscode열고 eas update:configure
Screen Component는 모두 navigation이라는 props를 가지고 있다.
React Navigation
- reset - navigation stack을 초기화
```
onPress={() =>
 reset({
  index: 2,
  routes: [{ name: "three" }, { name: "one" }, { name: "two" }],
        })
      }
```
- onPress가 됐을 때 index번째의 화면으로 이동(routes의 배열 2번째 "two")
- 뒤로 가기를 누르면 역순으로 이동("one" - "three")
screenOptions
- 전체 페이지에 효과를 일괄적용
- 해당 페이지에만 효과 적용할 땐 해당 screen에 options
Combine navigators
- 다른 navigator의 screen으로 이동할 때는 screen의 이름만 쓰는 게 아니고 해당 navigator의 이름도 써 줘야 한다.
  ex) Tabs navigator의 movies screen에서 Stacks navigator의 "one" screen으로 이동할 때
  <TouchableOpacity onPress={() => navigate("Stacks", { screen: "one" })}>
params로 아이디 주고 받기
- params로 아이디 객체를 넘겨준다.
  navigate("Stacks", { screen: "one", params: { id: 123 } })
- route props 안에 있는 params를 통해 받는다.
  const One = ({ route: { params },
  console.log("params:", params);
useEffect vs. useFocusEffect
- 앱에서는 화면에서 벗어날 때 Blur(언마운트) 되는 useFocusEffect를 활용
- useEffect를 쓰면 화면에서 벗어나도 언마운트 되지 않고 reset을 이용해 언마운트 시킬 수 있다.

과제 - movies UI 만들기

오늘 배운 내용 아이콘 바꾸기부터 다시 복습하면서 만듦

알게된 것

스크롤뷰 가로로 만들기
- <ScrollView horizontal={true}>
app.js의 userInterfaceStyle을 “automatic” 로 변경해야 휴대폰 설정에 따라 다크모드가 반영된다.

문제 및 시도

Detial, My page로 넘어갔을 때 뒤로 버튼 만들기
- reset으로만 만들 수 있는 건가?
- goBack() 이용..?
- Movies screen에서 영화 포스터를 누르면 Detail Page로 가고 뒤로 버튼도 생기게 하기
  -> 포스터의 OnPress에 reset 사용하기
  -> 다른 screen으로 이동할 때를 생각해서 적용
  -> reset에 다른 스크린의 위치를 추가하는 걸 모르겠음
- 시도한 것들
일단 navigate로 Detail Screen으로 이동하는 것만 해둠.

다크 모드까지 설정 완료
세세한 CSS는 잘 안 되는 게 있어서 내일 강의 보고 복습할 것

2. React Udemy 강의

알게 된 것

class 동적으로 추가하기
- .form-control.invalid input
- .form-control.invalid label
- 이렇게 CSS를 쓸 수 있다.

<div className={`form-control ${!isValid ? "invalid" : ""}`}>

styled-component로 props를 받아 적용하기
- <FormControl invalid={!isValid}>
- color: ${(props) => (props.invalid ? "red" : "black")};
css 모듈은 react native의 StyleSheet랑 비슷하다.