1.0 버전 회고

1. 네비게이션

디자이너가 원하던 네비게이션 효과가 명확하던 상태였습니다.
cardStyleInterpolator값 변경을 통해 디자이너가 원하는 형태로 바꾸긴 하였는데, 런칭 일정에 급급해 뒤늦게야 바꾸어 아쉬움이 남는 부분이었습니다.

<Stack.Screen
  name="root"
  component={BottomNavigation}
  options={{
    headerShown: false,
    cardStyleInterpolator:
    CardStyleInterpolators.forHorizontalIOS,
  }}
/>

2. 컴포넌트화 한 것들
   이미지가 크게 4가지 형식으로 구성되어서 컴포넌트화하여 사용하였습니다.
   components 폴더 내에서 img-title, img123폴더에 나누어 넣었었는데, 2.0버전에선 하나의 폴더 내에 넣으려고 합니다.

3. 페이지 vs 모달창
   일반 페이지는 왼쪽에서 오른쪽에서 나오는 애니메이션인데, 아래에서 위로 올라가는 애니메이션에 대해선 페이지로 나타낼지 모달창으로 나타낼지 고민했던 순간이 있었습니다.

첫번째 이미지가 페이지, 두번째 이미지가 모달창 상태입니다.
페이지로 할 경우, 아예 다른 페이지로 넘어가는 것이기 때문에 z-index를 신경쓰지 않아도 되어서 편했습니다. 또 App.tsx에서 페이지들을 관리할 수 있었기 때문에 편했습니다.
모달창으로 할 경우, props 값으로 함수도 넘길 수 있어서 좋았습니다.

export default function Write({route, navigation}: any): JSX.Element {
  ...
  return (
    <SafeAreaView style={commonStyles.container}>
      <View style={commonStyles.containerModal}>
        ...
      	// 여기가 모달창
        {isVisible && (
          <Modal
            visible={isVisible}
            animationType={'slide'}
            style={{margin: 0}}
            onDismiss={() => setIsVisible(false)}
            presentationStyle={'fullScreen'}
            onRequestClose={() => setIsVisible(false)}>
            <SearchPlace
              searchPlaceData={searchPlaceData}
              setSearchPlaceData={setSearchPlaceData}
              handlePlaceInfo={handlePlaceInfo}
              setIsVisible={setIsVisible}
            />
          </Modal>
        )}
      </View>
    </SafeAreaView>
  );
}

4. recoil

상태관리를 모두 recoil로 했다는 점인데, 2.0버전에선 react-query로 많이 바꿔쓰려고 합니다.