원티드 프리온보딩 챌린지 React Native 사전 과제 (2024년 2월)

wanted_pre_ch_rn_1.md

원티드 프리온보딩 챌린지 React Native 사전 과제 (2024년 2월)

아래의 질문에 대해서 본인이 생각하는 답변을 Comment에 작성해주세요. 링크를 첨부해주셔도 좋습니다.

1. 리액트 네이티브를 시작하게 된 이유, 또는 시작하려는 이유를 알려주세요.

2. 리액트 네이티브로 앱을 개발하며 겪었던 고충이 있다면 알려주세요. 해결한 과정도 있다면 같이 알려 주시면 좋을 것 같아요.

3. 아래 내용을 읽고 간단히 생각나는 것을 알려주세요.
   대량의 데이터를 리스트 형태로 세로로 나열하여 보여주기 위한 스크린입니다. 예제와 같은 코드에서 성능을 더 개선할 수 있는 방법이 있을 지, 그렇게 생각한 이유가 어떤 것인지 알려주세요. (예를 들어 관련 외부 라이브러리 사용, ScrollView 대신 다른 React Native 컴포넌트로 구현과 같이 단순히 생각나는 것들을 글로 설명해주셔도 되고, 예시의 코드를 작성해주셔도 좋습니다)

       ...
       const VeryHeavyComponent = () => {
         ...
         return (
           <View>
             // ...코드는 생략했지만 되게 복잡한 계산을 하는 컴포넌트라고 생각해주세요 :)
           </View>
         )
       }
   
       const ItemComponent = ({ title, content, type, image }) => {	
         ...
         return (
             <ItemView>
               <Title>{title}</Title>
               {type === 'image' ? <Image style={{ width: 150, height: 150 }} source={{uri: image}} /> : undefined}
               {type === 'text' ? <Description>{content}</Description> : undefined}
               <VeryHeavyComponent />
             </ItemView>
         );
       }
   
       const Screen = () => {
         ...
         return (
           <ScrollView>
             {items.map(data => <ItemComponent {...data} />)
           </ScrollView>
         )
       }

1. 크로스 플랫폼이 경제적으로 필요한 부분 사용할 수 있고, 기업입장에서 경제적이기 때문에, 수요는 꾸준히 있을 것이라 생각해서 시작하게 되었습니다. (플러터는 가독성이 여전히 아쉬워서, RN도 써보면서 비교 및 선택해보고 싶습니다.)

2. 2주동안 간간히 한것라 아직 없습니다.

3. lazying loading / 비동기 처리 / 이미지 랜더링 / 불필요한 랜더링 줄이기

import React, { useMemo } from 'react';
import { FlatList, View } from 'react-native';
import FastImage from 'react-native-fast-image';

//... 복잡한 계산을 하는 컴포넌트
const VeryHeavyComponent = () => {
  //...
  return (
    <View>
      {/* ...코드는 생략했지만 되게 복잡한 계산을 하는 컴포넌트라고 생각해주세요 :) */}
    </View>
  );
};

const ItemComponent = React.memo(({ title, content, type, image }) => {  
  //...
  return (
    <ItemView>
      <Title>{title}</Title>
      {type === 'image' ? (
        <FastImage
          style={{ width: 150, height: 150 }}
          source={{
            uri: image,
            priority: FastImage.priority.normal,
          }}
          resizeMode={FastImage.resizeMode.contain}
        />
      ) : undefined}
      {type === 'text' ? <Description>{content}</Description> : undefined}
      <VeryHeavyComponent />
    </ItemView>
  );
});

const Screen = ({ items }) => {
  const renderItem = useMemo(({ item }) => <ItemComponent {...item} />, []);

  return (
    <FlatList
      data={items}
      renderItem={renderItem}
      keyExtractor={item => item.id}
    />
  )
}