원티드 프리온보딩 챌린지 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.웹 프론트엔드 신입 시장의 포화상태를 인식하고, 경쟁력 있는 신입 개발자로서의 출발을 원해 리액트 네이티브 개발 포지션을 선택했습니다. 또한, 웹 기술 스택을 통해 모바일 플랫폼 시장으로의 확장 가능성에 큰 매력을 느꼈기 때문에 이 분야를 시작하게 되었습니다.

2.특정 플랫폼(iOS)에만 존재하는 기능을 구현하기 위해 커뮤니티 라이브러리를 활용하거나 직접 네이티브 브릿지를 개발해야 한다는 점에서, 특정 플랫폼에 대한 깊은 이해가 필수적임을 깨달았습니다. 처음에는 웹 기술만으로도 충분히 개발이 가능할 것이라 생각했지만, 기능의 요구사항이 복잡해질수록 러닝 커브가 가파르게 상승하는 것이 어려움으로 다가왔습니다. 결국, 해당 플랫폼의 언어를 배우며 문제를 해결해 나갔습니다.

3.해당 코드의 최적화를 위해서는 렌더링 효율성을 개선하는 것이 중요합니다. React Native에서 FlatList 컴포넌트를 사용하면 화면에 보이는 아이템만 렌더링되도록 하여 성능을 크게 향상시킬 수 있습니다. 이는 기존에 사용된 ScrollView와 map 함수를 통한 아이템 렌더링 방식 대비 효율적입니다. 또한, React.memo나 shouldComponentUpdate를 사용하여 이전 상태와 동일한 값으로 인한 불필요한 자식 컴포넌트의 재렌더링을 방지함으로써 성능을 추가로 최적화할 수 있습니다. 특히 VeryHeavyComponent와 같이 복잡한 계산을 수행하는 컴포넌트의 경우, 이러한 최적화 방법은 더욱 중요합니다. 이를 통해 애플리케이션의 반응성과 퍼포먼스를 크게 개선할 수 있을 것입니다

import React, { memo } from 'react';
import { FlatList, View, Text, Image } from 'react-native';

const VeryHeavyComponent = memo(() => {
  // 복잡한 계산 로직...
  return (
    <View>
      {/* 복잡한 계산 결과 렌더링 */}
    </View>
  );
});

const ItemComponent = memo(({ title, content, type, image }) => {
  return (
    <ItemView>
      <Title>{title}</Title>
      {type === 'image' && <Image style={{ width: 150, height: 150 }} source={{ uri: image }} />}
      {type === 'text' && <Description>{content}</Description>}
     <VeryHeavyComponent />}
    </ItemView>
  );
});

const Screen = () => {
  const renderItem = ({ item }) => (
    <ItemComponent {...item} />
  );

  return (
    <FlatList
      data={items}
      renderItem={renderItem}
      keyExtractor={item => item.id} // 가정: 각 아이템에 고유 id가 있다고 가정
    />
  );
}

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}
    />
  )
}