[TIL][RN] 영화 리뷰앱 클론코딩 사전준비

1. Expo Setup

홈페이지에서 만들지않고 로컬에서 바로 만들어서 올리는 법
개인적으로 훠얼씬 간편

• 프로젝트 생성

  npx create-expo-app project-name 

  eas update:configure

• 배포

  eas update

---

2. App icon, splash screen 변경

https://docs.expo.dev/guides/app-icons/

figma templet에 있는 가이드라인대로 디자인 및 제작하여 assets 폴더에 넣어서 바꾸기

이번 프로젝트 조 이름이 7조라서 칠면조라서 7개의 면으로 칠면조를 만들었는데
너무 하찮아서 하찮은대로 귀엽다.(내눈에만)

보다보니 정들어서 귀여울지도?!

---

3. react-navigation

• 공식문서

  https://reactnavigation.org/docs/getting-started/

• 설치

  npm install @react-navigation/native

• Installing dependencies into an Expo managed project

  // expo
  npx expo install react-native-screens react-native-safe-area-context

• NavigationContainer로 감싸줘야함

  // 예시
  <NavigationContainer>
    <Stack.Navigator>
      <Stack.Screen name="one" component={One} />
    </Stack.Navigator>
  </NavigationContainer>

• navigation prop

  • navigate
  • goBack
  • reset
  • setOptions
  • 등등..

• Native Stack

  • install

    npm install @react-navigation/native-stack

  • props, options 등 공식문서 참고

• Bottom Tabs

  • install

    npm install @react-navigation/bottom-tabs

  • props, options 등 공식문서 참고

Combine Navigators

강의 두 번 더 듣기

---

4. useEffect vs. useFocusEffect

• useEffect

  useEffect(()=>{
    // 마운트 된 후에 한 번만 실행
    return () => {
      // 언마운트 됐을 때 실행
    }
  }, []) // componentDidMount

• useFocusEffect
  react navigation에서 제공하는 hook

  useFocusEffect(useCallback() => {
    // Focus 현재 컴포넌트가 화면에 보임
    return () => {
      // Blur 현재 컴포넌트가 화면에서 보이지 않음
      // 언마운트 된 것이 아님 (reset method를 사용하면 초기화 시켜서 언마운트 됨)
    }
  }, [])

  ---

  5. Dark Mode

  https://docs.expo.dev/guides/color-schemes/

• app.json에서 userInterfaceStyle을 automatic 바꿔줌 기본은 light였다.

  "userInterfaceStyle": "automatic",

• useColorScheme

  • react native hook
  • 장치(기기)의 모드에 따라감
  • 핸드폰에서 다크모드 설정바꿔가며 확인하기 힘들어서 Xcode를 설치했다 ..설치가 진짜 하루종일이네

• ThemeProvider

  • react native 에서 제공하는것 말고 @emotion/native에서 제공하는 api 사용

    install

    npm install @emotion/react @emotion/native

  • 별도의 설정없이 props로 스타일 설정 가능

  • theme.js 파일을 따로 만들어놓고 쓰는게 styledComponents에서 사용하기 용이

---