모든 React Native 개발자가 알아야하는 개념들

이 글은 올룰로 Confluence에 작성했던 글을 재포스팅 하는 것이다

기능별로 묶기

우리는 보통 아래와 같이 기능 별로 파일을 나누고는 한다

• 현재 킥고잉 앱이 이런 구조로 되어있다

저자는 이렇게 사용하면 아래와 같은 문제점이 발생한다고 말한다

• 모듈화의 부재 — 기능을 쉽게 추출할 수 없다?
• 폴더안의 파일들이 서로 연관성이 없다
• 파일을 찾기가 어렵다
• 확장하기 어렵고 큰 규모의 팀에서 작업하는 경우 충돌이 발생할 수 있다

저자가 제시하는 해결책은 아래와 같은 구조로 변경하는 것이다

컴포넌트 밖에 로직 두기

우리는 종종 엄청나게 긴 컴포넌트를 목격한다.(안에 큰 로직을 가지고 있기 때문)
때문에 수정하는데 시간이 더 걸린다.

React는 UI만 렌더링하고 로직은 redux나 util로 빼야한다. 이렇게 함으로써

• 함수의 목적이 무엇인지 이해가 쉬워진다
• 로직을 다른 함수에서도 사용할 수 있다
• 개별 함수를 테스트하기 쉬워진다

잘못된 예

const WelcomCenter = () => {
  const getPartOfTheDay = () => {
    ...
    return "morning"
  }

  return <Text>{getPartOfTheDay()}<Text>
}

잘된 예

// WelcomCenter.tsx
import { getPartOfTheDay } from './utils/WelcomeCenterLogic'

const WelcomCenter = () => {
  return <Text>{getPartOfTheDay()}<Text>
}

// WelcomeCenterLogic.ts

export const getPartOfTheDay = () => {
  ...
  return "morning"
}

사용자 설정에 따른 큰/작은 폰트 크기 지원

사용자가 기본 폰트 크기를 변경하면 UI가 깨질 수 있다

최대 폰트 크기 증기 비율을 제한해라

아래와 같이 최대 2배로 크기를 제한할 수 있다

const MAX_FONT_SIZE_MULTIPLIER = 2
<Text maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}>Bla</Text>

중요하지 않은 Text는 줄 수를 제한해라

<Text numberOfLines={3}>Bla</Text>

• 중요한 Text라면 ScrollView로 감싸서 잘린 부분도 볼 수 있게 해라

다양한 애니메이션들

여기서 따로 설명하지는 않으나 React-Native-Reanimated 등을 사용할 수 있다

원문

Deep dive into React Native JSI