원티드 프리온보딩 챌린지 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. 개발자로서의 첫 업무를 React Native로 시작하게 되었습니다.
2. 크로스플랫폼이지만 Android와 iOS 각각의 생태계를 알아야 확실하게 해결할 수 있는 문제들이 많다.
3. FlatList 또는 FlashList 사용, VeryHeavyComponent를 메모이제이션하여 성능 최적화, <Image> 대신 react-native-fast-image의 <FastImage>를 사용하여 이미지 렌더링 최적화

1. 외주업체가 개발한 앱의 유지보수를 맡게되면서 처음 접하게 되었는데, 웹 개발만 하다가 새로운 스택을 접하게 되어 흥미로웠습니다.
2. 특정 라이브러리나 기능이 iOS와 안드로이드가 다르게 작동하여 해당 부분을 해결 하는 것이 쉽지 않았습니다. 웹뷰 상에서 웹에디터로 작성한 링크를 다른 브라우저로 열는 동작이 iOS에서는 잘 작동하지 않아 우회적으로 이벤트를 줘서 브라우저를 여는 방식으로 해결하였습니다.
3. ScrollView는 모든 아이템을 한 번에 렌더링하기 때문에 FlatList를 이용해 보여지는 부분만 렌더링하는 방식으로 변경합니다.

1. 리액트 지식으로 빠르게 앱을 만들기 위해 시작하게 되었어요
2. 사용할 수 있는 기능이 한정적이고, 라이브러리로도 원하는 기능을 구현하기 힘들 때 고충이 있는 것 같아요
3. 리스트를 그릴 때 ScrollView를 사용하지 않고 FlatList를 사용하면 좋을 것 같아요

1. UI를 빠르게 구현하는 등 생산성을 위해 리액트 네이티브를 선택했어요.
2. 클라이언트 단과 연결할 수 있는 방법에 대해 현재까지도 고민하고 있어요.
3. FlatList를 통해 부분적으로 렌더링할 수 있어 성능 최적화가 가능해요.

1. 앱 개발 프로젝트에 참여하며 처음으로 학습하게 되었습니다. 당시 주어진 기간이 짧아서 학습 비용이 들지 않는 리액트 네이티브를 선택하게 되었습니다.
2. 네이티브 앱을 개발한 경험이 없다보니 안드로이드와 IOS에서 호환되지 않는 기능들에 대한 이해가 부족한 것 같습니다.
3. ScrollView 대신 FlatList를 사용하면 현재 화면에 보이는 아이템만 렌더링해 성능을 최적화 할 수 있습니다.

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