React Native로 실제 서비스를 100% 구현 해보자 (2)

xedni·2021년 1월 16일
10

Project | MarketHolly

목록 보기
2/2
post-thumbnail

5. Code Review

3) Scene

(2) ProductDetail

(1) ProductDetail.js

// 렌더 부분
<ProductDetailHeader goBack={goBack} />
<ProductDetailTab goToSelectProduct={goToSelectProduct} />
  • 헤더와 탭으로 나뉜다. 스택에서 헤더를 지웠으므로 헤더를 만들어줘야한다.
    렌더부분은 헤더와 탭 네비게이션이 있는 컴포넌트 2개만 존재한다.
<Stack.Screen
  name='productDetail'
  component={ProductDetail}
  options={{
  title: '제품상세',
  headerShown: false,
  }}
/>
  • 스택들의 헤더는 제품명이 들어가고 보라색 헤더라인도 없다. 따라서 원래 있던 헤더를 없애고 새로 만들어줄 필요가 있다.
const ProductDetailHeader = (props) => {
  return (
    <>
      <StatusBar barStyle='dark-content' />
      <StyledStatusBar />
      <ViewContainer>
        <StyledTouchableOpacity>
          <AntDesign name='left' size={20} onPress={props.goBack} />
        </StyledTouchableOpacity>
        <HeaderName>{props.state.name}</HeaderName>
      </ViewContainer>
    </>
  );
};
  • 위의 코드가 productDetail의 헤더
  • ProductDetailHeader 는 모든 스택에서 재활용해서 사용하기 위해 만들어둔 헤더(아래)와는 다르게 Redux state에서 상품명을 가져오고 있다.
const StackHeader = (props) => {
  return (
    <>
      <StatusBar barStyle='dark-content' />
      <StyledStatusBar />
      <ViewContainer>
        <StyledTouchableOpacity>
          <AntDesign name='left' size={20} onPress={props.goBack} />
        </StyledTouchableOpacity>
        <HeaderName>{props.title}</HeaderName>
      </ViewContainer>
    </>
  );
};
  • 이게 스택에서 재활용해서 사용하기 위해 만들어둔 헤더이다.
export default function ProductDetailTab(props) {
  return (
    <>
      <TabStack.Navigator
        initialRouteName={'상품설명'}
        tabBarOptions={{
          activeTintColor: Theme.colors.mainColor,
          inactiveTintColor: Theme.colors.grayColor,
          pressColor: Theme.colors.mainColor,
          indicatorStyle: {
            borderBottomWidth: 2,
            borderBottomColor: Theme.colors.mainColor,
          },
          style: {
            borderBottomColor: '#d8d8d8',
            borderBottomWidth: 0.5,
          },
          labelStyle: { width: 100 },
        }}>
        <TabStack.Screen name='상품설명' component={ProductInformation} />
        <TabStack.Screen name='상품이미지' component={ProductImage} />
        <TabStack.Screen name='상세정보' component={ProductDescription} />
        <TabStack.Screen name='구매후기' component={ProductReview} />
        <TabStack.Screen name='상품문의' component={ProductInquire} />
      </TabStack.Navigator>
      <ViewContainer>
        <BuyButtonBox onPress={props.goToSelectProduct}>
          <BuyButtonText>구매하기</BuyButtonText>
        </BuyButtonBox>
      </ViewContainer>
    </>
  );
}
  • 이게 마지막 탭 네비게이션인 제품 상세 페이지의 네비게이션!!
{discountPrice.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')}

(2) WriteReview.js

: Detail 페이지의 탭들 중 후기 작성은 재미있는 라이브러리들이 많다.

import * as ImagePicker from 'expo-image-picker';
  • 먼저 ImagePicker 이다. 이미지를 첨부할때 사용되는 라이브러리이다.
  const pickImage = async () => {
    let result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.All,
      allowsEditing: true,
      aspect: [4, 3],
      quality: 1,
    });
    if (!result.cancelled) {
      const prevImage = [...addImage];
      prevImage.push(result.uri);
      setAddImage(prevImage);
    }
  };
  • Input의 라벨을 클릭할 수 있도록 만들어두었고 클릭시 위와 같은 함수가 실행된다.
  const currentDate = () => {
    setDate(new Date().toString());
  };
  • Input받은 값은 아니지만 나중에 후기 리스트에서 날짜도 보여주기 위해 함께 담아보자.

(3) ProductReview.js

: ProductReview page(리스트)에서 후기 작성에서 작성한 내용을 볼 수 있는 페이지이다.

  • 마찬가지로 큰 기능은 없으므로 패스

(4) WriteInquire.js

: 문의하기 기능이 있는 페이지인데 이메일 전송 라이브러리를 사용했다.

import * as MailComposer from 'expo-mail-composer';
  • expo-mail-composer는 이메일 보내기가 가능한 라이브러리이다.
  const handleEmail = () => {
    MailComposer.composeAsync({
      recipients: ['kaaiinn4@gmail.com'],
      subject: title,
      body: bodyText,
    });
  };
  • 생각보다 간단했다. 위 코드처럼 input으로 받아온 데이터를 composeAsync로 내용만 전달하면 되도록 사용법이 간단하다.

(2) Recommend.js

: 하단 탭의 두번째 씬이다. 사실 큰 기능은 없다. 그치만 꼭 만들어보고 싶었다.

  • 큰 기능이 없는 추천페이지에 메거진처럼 쭉 스크롤하며 볼 수 있는 페이지를 하나 만들어보고 싶었다. 상품만 나열되어있는 앱은 반드시 제품을 구매할때를 제외하고는 들어오지 않을 것 같았다.

(카트, 검색기능 등등은 이전 프로젝트에도 많이 있으므로 생략)


6. 소감

  • Bottom에 존재하는 5개의 탭, 홈에 있는 5개의 탭, 상세 페이지에 있는 5개의 탭, 그리고 장바구니와 같은 10종류 이상의 스택 스크린 페이지까지 정말 수 많은 스택을 네스팅 구조를 결정하는 것에 가장 많은 고민을 했었다. Bottom 탭을 메인 네비게이터로 만드는 실패로 일주일 이상의 시간을 소비하기도 했다.
    하지만, 덕분에 이제는 스택 구조화에는 어느 누구보다 자신감이 생겼다.

  • 인턴쉽 기간에 동시에 진행한 프로젝트였다. 때문에 기간 내 모든 시간을 이 프로젝트에 투자하지 못했고 개인적으로 조금 더 완성도 높이지 못한 아쉬움이 있었다. 하지만 동시에 여러개의 프로젝트를 진행 해보는 경험이 추후 협업에 큰 도움이 될 것 같다.

profile
"꾸준한 삽질과 우연한 성공"

2개의 댓글

comment-user-thumbnail
2021년 1월 23일

발표때 진짜 보고 깜짝 놀랐어요 상혁님거 코드 보고 리네 공부 좀 하겠읍니다

1개의 답글