[인턴일지] MISE - 4 (라이브러리 1)

18904 단어 자바스크립트 인턴일지 리액트네이티브 리액트네이티브

오랜만입니다🤩
학기가 개강하고 동아리 활동에 여러 프로젝트를 진행하다보니 업로드 할 리스트 업만 해놓고 정작 글을 못썼어요!(~~자랑아니라고~~

오늘은 제가 CHERY 프로젝트를 진행하며 적용 한 react native의 다양한 library를 소개해보려고 해요! 아마 1편, 2편으로 나누어지지 않을까 싶네요:)

Swipe List View

CHERY 앱은 고등 영어 내신 및 수능을 돕는 교육 앱입니다. 그래서 영어 공부 일정을 관리하는 DDay 설정 기능이 존재합니다✨

위와 같이 옆으로 스와이프 해서 삭제하거나 추가하는 뷰를 본적이 있으실텐데요, 체리 앱에서도 dday를 핸들링할 때 스와이프하고 딸칵! 눌러서 동작을 처리하도록 구현해야 했습니다!

이때, 리액트 네이티브가 이걸 구현해 놓았습니다! 우린 가져다 쓰기만 하면돼요,,🧡

🔗 공식 문서
리액트 네이티브 스와이프 리스트 뷰 입니다!
react-native-swipe-list-view-github
react-native-swipe-list-view-npm

공식 문서에 따라 라이브러리를 설치해줍니다!

npm install --save react-native-swipe-list-view

그럼 '스와이프해서 삭제'를 구현했던 방식을 볼까요?

기본 틀은 다음과 같습니다.

        <SwipeListView
          bounces={false}
          data={data}
          renderItem={renderItem}
          renderHiddenItem={renderHiddenItem}
          rightOpenValue={-100}
          leftOpenValue={100}
          stopLeftSwipe={100}
          stopRightSwipe={-100}
        />

공식문서를 보면 감이 올거라고 생각해요!
data는 list view에 뿌려 줄 데이터를 말하는 것이고, renderItem은 list view row를 나타내는 컴포넌트, renderHiddenItem은 row 뒤에 숨어있는 뷰, 즉 스와이프 하면 보이는 컴포넌트를 말해요! rightOpenValue는 오른쪽으로 몇 dp만큼 스와이프해야 뷰가 열리는지, stopRightSwipe는 몇 dp까지 스와이프를 허용할건지! 조금만 봐도 어떻게 써야할지 감이 옵니다😆

앗 그러면 스와이프 후 눌렀을 때 동작은 어디서 구현하나요?

라는 의문이 들 수도 있는데, 스와이프 해서 누르는 뷰는 renderHiddenItem 이겠죠?
TouchableOpacity로 만들어서 onPress에서 처리해주면 됩니다!

그렇다면 renderHiddenItem은 다음과 같이 작성할 수 있겠죠? (오른쪽으로 100만큼 swipe 해서 눌러서 삭제하는 컴포넌트를 구현했습니다)

 <GlobalStyled.ViewCol
          height={80}
          style={{
            width: wp(50),
            flex: 1,
            alignItems: 'flex-end',
          }}
        >
	<GlobalStyled.ViewCol
    	style={{ 
        	width: 100, 
            backgroundColor: theme.Red
        }}
        as={TouchableOpacity}
        onPress={() => {
        	// delete logic here
        }}
     >
		<GlobalStyled.Noto4 color={'white'}>
        	{'삭제'}
        </GlobalStyled.Noto4>
	</GlobalStyled.ViewCol>
</GlobalStyled.ViewCol>

이렇게 일정 너비에서 스와이프를 멈추고 눌러서 구현하게 하는 방식외에도 그냥 일정 너비 이상 밀면 삭제가 되는식으로 구현하는 것도 많이 고려할 것 같아요! 더 쉽습니다!! stopLeftValue 등을 고려를 안하면 되겠죠?
swipe list view로 rn 프로젝트의 퀄리티를 더 높일 수 있을 것 같지 않나요?🔥🔥

ClipBoard

체리 v1.7.4에서부터는 친구초대라는 공유 기능이 생겼습니다! kakao share에 대해서는 따로 한 문서로 다루도록 할게요.

링크복사라는 기능, 다른 앱에서도 많이 보이는 기능 중 하나죠? 이 링크를 내 기기의 클립보드로 복사해서 다른 곳에 붙여넣어서 공유할 수 있는,,! 리액트 네이티브는 이것도 해줍니다!👏🏻와ㅏ아앙짝짝잒

🔗 공식 문서
리액트 네이티브 클립보드!
react-native-clipboard/clipboard-github
react-native-clipboard/clipboard-npm

먼저 설치부터!

npm install --save @react-native-clipboard/clipboard

import도 해주고~

import Clipboard from '@react-native-clipboard/clipboard';

체리 앱에서는 링크를 복사하면 해당 기기 플랫폼의 스토어로 가도록 했습니다!

아이폰 -> 앱스토어 설치 링크
안드로이드 -> 구글 플레이스토어 설치 링크

어떻게 사용하는지 바로 볼까요?

앱에서 링크복사를 누르면 copyToClipboard()라는 함수가 실행됩니다. copyToClipboard로 가보면,

  		{
            title: '링크 복사',
            onPress: () => {
              copyToClipboard();
            },
            icon: Link,
        },

 const copyToClipboard = async () => {
    const link = {
      ios: 'https://apps.apple.com/kr/app/%EC%88%98%EB%8A%A5-%EB%82%B4%EC%8B%A0%EC%98%81%EC%96%B4-chery-%EC%B2%B4%EB%A6%AC/id1572312819',
      android: 'https://play.google.com/store/apps/details?id=com.chery',
    };

    if (Platform.OS === 'ios') {
      Clipboard.setString(link.ios);
    } 
    else if (Platform.OS === 'android') {
      Clipboard.setString(link.android);
    }

    if (Clipboard.hasString()) {
      Snackbar.show({
        text: '클립보드에 복사되었습니다.',
        duration: Snackbar.LENGTH_SHORT,
        backgroundColor: 'white',
        textColor: `${theme.CheryBlue}`,
      });
    }
  };

클립보드에 링크를 복사해서 set할때는 setString()을 사용합니다.
클립보드에 링크가 복사되었는지(링크가 존재하는지) 확인하려면 hasString()을 사용합니다.
클립보드에 복사 된 string은 getString()으로 확인 가능합니다.

실제로 체리 앱에서 링크복사를 누르면, 복사가 완료 되었다는 스낵바가 출력되고,

카톡에 붙여넣기를 해보면 체리 앱의 앱스토어 링크가 나옵니다!(저는 아이폰이기때문!)

링크 복사 기능 참 쉽죠? 링크가 복사되었을때 스낵바 말고도 애니메이션 같은 동작을 추가할 수 있을 것 같네요👍🏻

navigation

1편의 마지막은,, 리액트 네이티브에서 뗄래야 뗄 수가 없는 stack & navigation 입니다! 그 중에서도 navigation을 왜 가져왔냐! goBack()과 연관이 있는데요 두구두구.... 끝까지 읽어주세요😅😅

네비게이션은 rn에서 화면을 전환할 때 필수적입니다. stack으로 밑단을 구성하고 스택 안에서의 화면전환, A 스택에서 B 스택으로의 화면전환, 뒤로가기, 홈화면 가기 등 모든 화면 전환에 관여한다 해도 과언이 아닌데요✨

🔗 공식 문서
react naviagtion

설치부터~

npm install @react-navigation/native

NavagationContainer 등으로 초기 작업을 다 마친 상태라고 가정하겠습니다!

Stack 안에서의 screen 이동은 어떻게 할까요? (모든 경우에서 param을 실어 보내는 법도 다루겠습니다!)

같은 스택 안이라면, navigate의 첫 인자로 screen 이름만 주면 됩니다! (Stack에 정의되어있는 screen명 이어야 해요!)

예를들어, 디데이 스택 안의 디데이 리스트 페이지에서 디데이를 추가하는 DDaySettingPage로 이동하는 예제는 다음과 같습니다.
그리고 sat이라는 param도 실어 보냅니다!

const moveDdayPageHandler = () => {
    navigation.navigate('DDaySettingPage', {
      sat: today_sat,
    });
  };

DDaySettingPage에서는 param을

const sat = props.route.params.sat

으로 받으면 됩니다.

Stack A의 screen a에서 Stack B의 screen b로의 이동은 어떻게 할까요?

즉, 서로 다른 스택에서의 경우는 어떻게 이동할까요? 전처럼 navigate의 첫번째 인자로 스크린명을 주면 안될것 같네요🤔

정답은 첫번째 인자로 stack 이름을 주는 것입니다!

예를들어 현재 스크린에서, 다른 스택 B에 있는 스크린 b로 이동한다고 합시다.
그리고 name이라는 param도 준다면?

const moveToB = () => {
    navigation.navigate('BStack', {
      screen: 'b',
      params: { name: myName },
    });
  };

감이 잡히셨나요?

그렇다면,, 아까 위에서 말했던 goBack 관련 navigate에 대해서 이야기 해보겠습니다.
navigate에는 goBack()이라는 함수가 존재해서, 그냥 스택에 쌓인 순서대로 뒤로 갈 수 있는 기능이 있는데요!

만약 A screen에 page라는 값이하나 있다고 합시다.
B screen에서 뒤로가면 A screen인데, B screen에서 어떤 page값을 정해서 A로 보내주고 싶습니다!

B에서 아래 코드만 넣어주면 뒤로(A로) 가는 것은 일도 아닙니다. 하지만 goBack시에는 navigate 함수처럼 param을 실어 보내주는 기능은 없는데요...😂

   navigation.goBack();

이러면 어떨까요?
A에서 B로 넘어갈 때 인자로 page 값을 set하는 함수 'setPage'를 넘겨줍시다.
그리고 B에서 page 값을 받아서 뒤로갈때,
route.params.setPage(myPage) 이런식으로 넘겨줄 수 있지 않을까요??

예제로 보면 감이 잡힐거라 생각해요!✨

A screen

  const [page, setPage] = useState(0);
  
  const onSetPage = (page) => {
    setPage(page)
  };
  
  const goToB = () => {
    navigation.navigate('B', {
      onSetPage: onSetPage,
    });
  };

우리는 A에 있는 page 값을 바꾸는 것이 목표에요✨ B로 넘어갈 때 이 page 값을 핸들링하는 함수를 param으로 넘겨줍시다.

B Screen

const goToPage = (BPage) => {
    route.params.onSetPage(BPage);
    navigation.goBack();
};

B에서는 특정 page값을 찾아서 A의 페이지 값을 변경해주고 싶어요!
그렇다면, param으로 넘어온 onSetPage에 B의 페이지 값을 넘겨준다면? A에서도 정상적으로 set 될겁니다. 그리고 goBack()을 실행시켜주면 뒤로 가서 A 스크린이 뜨겠죠?

비슷한 예제가 있어서 첨부합니다!

이렇게 3개의 서로 다른 라이브러리를 살펴보았는데요, 특정 기능만 기술한거라 부족한 점이 많습니다😅
하지만 예제와 공식문서를 통해서 충분히 확장가능한 여러분만의 리액트 네이티브 앱을 만들 수 있을거라 생각해요✨✨

생각보다 많은 라이브러리들이 지원되는 리액트 네이티브! 어떠셨나요?
다음편엔

Patch-pakage
Modal
Slider

다뤄볼까 생각중이에요! 모두 좋은 밤 되세요

Author And Source

이 문제에 관하여([인턴일지] MISE - 4 (라이브러리 1)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@sjlim/인턴일지-MISE-4-라이브러리-1

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

[알고리즘/정렬] 2. 퀵 정렬(Quick Sort)

[데이터 분석] 1. 코로나 데이터 분석 #1. 국내 코로나 확진자 수 추이

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다