🍭 Note #2021-01-27

오늘은 작은 버그 두개를 수정하고, 동영상을 보여주는 라이브러리 교체, 애널리틱스(Analytics) 이벤트와 파라미터에 관한 문서를 작성했다.

1️⃣

핔의 상세리뷰에서는 유튜브 동영상을 통해 패션 아이템을 상세히 추천 받을 수 있다. 따라서 react-native로 개발한 앱에서 동영상을 보여주는 기능이 구현되어 있는데, 기존에는 react-native-youtube-iframe을 통해 이 기능이 구현되어 있었다. 이 npm 패키지는 네이티브 유튜브 앱보다 더 안정적으로 알려진 웹뷰 플레이어를 사용하여 React Native 앱에 영상을 삽입할 수 있게 해준다.

개념 #1

• 먼저, iframe은 HTML iframe은 웹 페이지 내에 웹 페이지를 표시하는 데 사용된다.
• 네이티브 앱에서 웹뷰는 html에서의 iframe과 비슷한 개념으로 네이티브 앱에서 html을 보여주기 위해 사용되는 View이다. (안드로이드의 경우 framework에 내장된 컴포넌트 뷰(View)형태인 WebView로 앱에 임베딩 할 수 있다.)
• 웹뷰는 단순하게, 웹 페이지를 보기위해도 사용하지만, 안드로이드 앱 안에서 HTML을 호출하여 앱을 구현하는 하이브리드 형태의 앱을 개발하는데에도 많이 사용된다.

그런데 ios는 테스트 시 문제가 없었는데 안드로이드 테스트 경우 영상 재생/정지, 모달이 열리고 닫히지가 않는 등의 버그가 있어서 이를 react-native-youtube-sdk 패키지를 사용하여 구현하도록 바꾸는 작업을 했다. 이것은 네이티브 앱의 라이브러리 등과 같은 sdk를 이용하여 동영상을 보여줄 수 있다.

그 구현 자체는 기존 코드 몇줄만 수정하면 되어서 어렵지 않았는데, 동영상 삽입이 생각보다 간단하게 구현되어 있던 점이 신기했다. 그냥 <YouTubePlayer /> 컴포넌트만 하라는데로 잘 사용하면 됨. 그리고 부모 컴포넌트에서 자식 컴포넌트 안에 있는 YouTubePlayer의 메소드는 ref를 사용해 컴포넌트의 Dom에 접근하여 사용할 수 있다.

2️⃣

또! 오늘은 앱의 인사이트를 자동으로 측정하여 제공해주는 firebase Analytics가 우리 어플의 어디서 쓰이는지에 관한 문서를 작성하며 애널리틱스가 어떻게 앱에 적용되는지 알게되었다.

핔에서는 이미 (알림기능을 제공하는) cloud messaging, (실제 사용자들이 앱을 사용하면서 발생하는 오류에 대해서 쉽게 파악할 수 있게 해주는) crashlytics, (링크만으로도 앱의 원하는 컨텐츠에 도달할 수 있게끔 해주는 (앱이 설치 되어 있지 않아도 설치 후 그 링크로 가게 해줌)) dynamic Link 등의 많은 기능들을 react native firebase 라이브러리에서 사용하고 있으므로 Firebase Analytics를 사용한다고 한다.

이미 기능은 구현되어있었지만 구현된 코드를 통해 어떤 곳에서 인사이트를 측정하는지, 어떻게 앱에 애널리틱스를 적용하는지 알게되었다.

개념 #2

• Predefined Events: Firebase가 미리 정의해놓은 이벤트들
  (이벤트 유형에 따라 맞춤 보고서가 제공되므로 되도록 기본 이벤트를 사용하면 좋다!)
• Custom Event: 이름과 데이터를 직접 설정한 커스텀 이벤트
  (프로젝트당 고유 Parameter를 최대 50개까지만 설정할 수 있으므로 남용하면 Parameter 개수제한에 걸려 애써 수집한 데이터를 날릴 수도 있다)

// Predefined Events 사용 예) 아이템 디테일 페이지 접근시 호출
export const logViewItem = async (item: IItem) => {
  await analytics.logViewItem({
    items: [ItemSerializer(item)],
  });
};

// Custom Event 사용 예) 좋아요 클릭 시 호출
export const logLikeReview = async (
  content_type: string,
  content_id: string,
) => {
  await analytics.logEvent('like_review', {
    content_type,
    content_id,
  });
};

3️⃣

그래서 훅이 뭔가요?

• Hook은 함수 컴포넌트에서 리액트 state와 생명주기 기능을 연동할 수 있게 해주는 함수로, class 없이 리액트의 모든 기능을 사용할 수 있게 해줍니다. (Hook은 class안에서는 동작하지 않습니다)

• 매번 실행되지 않는 코드 라인으로 리액트 코어가 실행 여부를 결정한합니다. 따라서 매번 실행하고 싶지 않은 로직들을 적는 곳.

훅 검사 로직

1. React는 Element만(render tree - key) 기억하고, hook은 unique하게 기억하지 않는다. hook은 종류와 순서만 기억.

// 이러면 안됨
items.forEach(() ⇒ {

const [liking, setLiking] = useState(false);

});

2. 호출된 hook의 개수가 다르면 에러, 종류가 다르면 에러

// 에러남
const {data} = useItem(id);

if(!data) {
	return <></>;
}

const [liking, setLiking] = useState(false);

훅이 왜 좋나요?

1. 훅을 사용하면 컴포넌트로부터 상태 관련 로직들을 추상화 할 수 있게 되어 독집적인 테스트와 로직 재사용을 가능하게 해줍니다.

2. 클래스의 componentDidMount, componentDidUpdate, componentWillUnmount에서 생명주기 메서드를 기반으로 수행하는 코드들을
   훅을 통해 로직에 기반을 둔 작은 함수로 컴포넌트를 나눌 수 있습니다.

   ⇒ Event listener 정의, 바인딩, 바인딩 해제 3가지를 1가지 hook에서 같이 할 수 있습니다.

3. 클래스 컴포넌트를 사용할 때보다 간결한 코드를 작성할 수 있습니다.

훅이 없으면 왜 안 좋나요?

class 컴포넌트를 사용할 경우 stateful 코드를 재사용하기 위해 HOC(고차함수 컴포넌트) 또는 render props의 형태로 state 값을 부모 컴포넌트로부터 전달 받아 사용합니다. 이러한 경우 코드가 직관적이지 않고 Wrapper Hell에 빠지게 됩니다.

Etc.

React 렌더링 이해 및 최적화 (With Hook)

리액트는 어떻게 동작?

Refs, 참고하면 좋은 자료

조대협의 블로그:안드로이드 웹뷰(Webview)의 이해와 성능 최적화 방안

Firebase Analytics, BigQuery없이 어디까지 가능할까

React Native Firebase doc

React-Native Firebase Analytics 설정 팁!