[번역] React Native Masters-2: React Native 애플리케이션의 모범 사례

오성준·2024년 2월 17일

Crash Reporting import path alias react native responsive typescript

React Native

목록 보기

5/9

원문: https://blog.stackademic.com/optimizing-react-native-best-practices-for-effective-development-28516c8df413

"모범 사례"의 진정한 의미란?

코딩 세계에는 엄격한 규칙이 있는 것이 아니라, 단지 많은 코더가 코드를 작성할 때 무시하는 경향이 있는 제안 사항만 있을 뿐입니다. 처음 시작할 때는 가이드라인 없이도 코드가 잘 작동할 수 있으므로 이 가이드라인을 건너뛰어도 괜찮아 보일 수 있습니다. 그러나 코드가 커질수록 코드를 건강하고 관리하기 쉽게 유지하려면 이러한 제안 사항을 따르는 것이 중요합니다.

이제 React Native의 모범 사례에 대해 이야기해 보겠습니다. 다음은 유지 관리하기 쉬운 코드를 작성하기 위해 따를 수 있는 일련의 지침입니다. 이 글에서는 이러한 사례들에 대해 자세히 알아보겠습니다.

1. 모듈 종속성들을 순서대로 Import하기

1. Import 그룹

- 표준 라이브러리 (React, React-Native)

import React from 'react';
import { TouchableOpacity, View } from 'react-native';

- 서드파티 라이브러리

import axios from 'axios';
import lodash from 'lodash';

- 자신의 코드 Import

import { Button, Card } from '../components';
import { MainLayout } from '../layouts';

- Module-Specific Import (styles, PNG 등)

import styles from'./myComponent.styles';
import image from './image.png';

- 테스트 전용 Import

import { testFunction } from './tests';

2. 정렬

- 알파벳 순서
알파벳 순서를 적용하면 가져오기 항목을 빠르게 찾을 수 있습니다. 이는 각 Import 그룹 내에서 적용할 수 있습니다.

- 구조화되지 않은 Import
그룹에 항목이 몇 개만 포함되어 있는 경우 한 줄에 하나의 항목으로 나누면 가독성을 높일 수 있습니다.

- ESLint 또는 Prettier 규칙
코딩 표준을 자동화하고 적용하려면 ESLint와 같은 린팅 도구나 Prettier와 같은 코드 포맷터를 사용하세요. 이러한 도구에는 Import 정렬 및 포맷팅에 대한 규칙이나 configuration이 있는 경우가 많습니다.

- Configuration 예시 (ESLint)

// .eslintrc.json
{
  "rules": {
    "import/order": ["error", {"newlines-between": "always", "alphabetize": {"order": "asc"}}]
  }
}

// .prettierrc.json
{
  "singleQuote": true,
  "semi": false,
  "arrowParens": "avoid"
}

이러한 도구와 configuration을 사용하면 Import 그룹화 및 정렬을 비롯한 코딩 규칙 적용을 자동화하여 코드베이스를 보다 일관성 있고 유지 관리하기 쉽게 만들 수 있습니다.

2. React Native 애플리케이션에서 Typescript로 작성하기

Typescript는 정적 타입을 사용하는 프로그래밍 언어로, 변수, 함수 및 기타 요소의 데이터 타입을 명시적으로 정의할 수 있습니다. 따라서 코드의 신뢰성이 높아질 뿐만 아니라 컴파일 과정에서 버그를 발견할 수 있습니다.

주문 가격을 계산하는 다음의 예시를 살펴보겠습니다.

function calculateProductPrice(product) {
    const { basePrice, discountPercentage } = product;
    const discountValue = basePrice * (discountPercentage / 100);
    return basePrice - discountValue;
}

현재 코드는 잘 작동하지만 주문 객체의 속성에 대한 정보가 부족합니다. 존재하지 않는 속성에 액세스하려고 하면 잠재적으로 충돌이 발생할 수 있습니다.

이러한 문제를 방지하고 코드 가독성을 개선하기 위해 TypeScript가 등장했습니다. TypeScript는 Javascipt에 타입을 추가하여 객체의 각 속성에 타입을 지정할 수 있게 함으로써 오류 발생 가능성을 줄여줍니다.

interface Product {
    basePrice: number;
    productName: string;
    discountPercentage: number;
}

function calculateProductPrice(product: Product) {
    const { basePrice, discountPercentage } = product;
    const discountValue = basePrice * (discountPercentage / 100);
    return basePrice - discountValue;
}

const exampleProduct: Product = {
    basePrice: 800,
    productName: "Example Product",
    discountPercentage: 10,
};

const calculatedPrice = calculateProductPrice(exampleProduct);
console.log(`The final price for ${exampleProduct.productName} is ${calculatedPrice}`);

TypeScript를 사용하면, 사용자와 에디터가 코드에서 객체 속성과 해당 타입을 인식할 수 있으므로 기능을 더 쉽게 이해하고 확장할 수 있습니다.

3. React 및 TypeScript에서 path alias를 사용하여 더 깔끔하게 Import하기

path alias를 사용하는 것은 Import 경로를 더 짧고 더 쉽게 이해할 수 있도록 코드에 바로 가기를 제공하는 것과 같습니다. 이것은 특히 내부에 많은 폴더가 중첩되어 있어 Import를 더 쉽게 읽을 수 있을 때 유용합니다.

예를 들어, 다음과 같이 긴 Import를 대신할 수 있습니다.

import { TextButton } from '../../components/buttons';
import { DangerButton } from 'components/buttons';
// OR
import { DangerButton } from 'buttons';

TypeScript 및 React Native에서 path alias를 사용하여 코드에서 Import 경로를 단순화하고 보다 간단하게 만드는 방법에 대해 알아보세요.

1. TypeScript Path Alias

프로젝트에 tsconfig.json 파일이 아직 없는 경우 다음 단계에 따라 파일을 만들거나 업데이트하세요.

"baseUrl"을 "."로 설정합니다. 이는 루트 디렉터리를 나타내며 모든 path alias의 시작점 역할을 합니다.
"path" 객체에 path alias를 포함합니다. 이 예에서는 두 개의 path alias가 정의되어 있습니다. [여기에 path alias를 삽입하세요.]

{
   "extends":"@tsconfig/react-native/tsconfig.json",
   "compilerOptions":{
      "strict":true,
      "baseUrl":".",
      "paths":{
         "components/*":[
            "src/components/*"
         ],
         "buttons":[
            "src/components/buttons/index"
         ]
      }
   }
}

이제 TypeScript는 이러한 Import를 쉽게 인식하고 작업할 수 있습니다.

import { TextButton } from "components/buttons";
import { DangerButton } from "buttons";

2. React Native Path Alias

시작하려면 다음 명령 중 하나를 사용하여 개발자 종속성으로 babel-plugin-module-resolver를 추가합니다.

yarn add -D babel-plugin-module-resolver 또는 npm install babel-plugin-module-resolver --save-dev

다음으로 module-resolver plugin을 포함하도록 babel.config.js 파일을 수정하고 이 plugin이 가리킬 디렉터리를 지정할 수 있습니다.

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        root: ['./'],
        extensions: ['.js', '.jsx', '.ts', '.tsx'],
        alias: {
          // This needs to be mirrored in tsconfig.json
          'components': './src/components/',
          'buttons': './src/components/buttons',
        },
      },
    ],
  ],
};

4. Crash Reporting 도구 사용하기

Crash Reporting 도구는 앱의 슈퍼 히어로 사이드킥처럼 24시간 내내 문제를 감시합니다. 앱 충돌과 오류를 실시간으로 빠르게 포착하고 이해하여 무엇이 잘못되었는지 파악할 수 있도록 도와줍니다.

앱에서 작업하던 중 갑자기 앱이 예기치 않게 충돌하는 상황을 상상해 보세요. 크래시 분석을 사용하면 마치 탐정처럼 빠르게 원인을 알아낼 수 있습니다.

Sentry, Firebase, Crashlytics 등 멋진 Crash Reporting 도구가 많이 있습니다. 이러한 도구는 문제를 해결하고 잠재적인 충돌로부터 앱을 보호하는 데 도움을 주는 든든한 친구 같은 존재입니다.

5. 반응형 스타일 속성 적용하기

React Native에서 반응형 스타일 속성은 함수를 사용하여 다양한 화면 크기와 방향에 맞게 조정되는 유연한 사용자 인터페이스 또는 레이아웃을 디자인하는 것입니다. 반응형 React Native 앱은 다양한 방법으로 만들 수 있습니다. 이전 글에서 React Native 반응성에 대해 설명한 것처럼 확장 가능한 font와 dimension에 대한 전략을 자세히 살펴봤습니다. 자세한 내용은 "React Native: 확장 가능한 font, dimension 및 pixel을 통해 반응성 달성"을 참조하세요.