React-native 기본 세팅 템플릿 만들기

| 만든 이유

항상 프로젝트를 진행하다보면 초기에 세팅하고 여러가지 npm 모듈을 받는데에 많은 시간을 쏟는다.

모듈을 미리 받아놓고 자주 사용하는 것들을 컴포넌트로 빼놓으면 어떠한 프로젝트를 진행할 때 git에서 클론을 받아서 사용하면

초기 설정의 시간을 줄일 수 있다고 생각했다.

Button이나 Input은 매번 디자인에 따라 달라지기 때문에 따로 만들어 놓지는 않았지만 앞으로 더 좋은 방안을 찾아가며

업데이트를 해야될거같다 또한 타입스크립트도 추가 할 생각이다.

 

| 프로젝트 구조

|____recoil
| |____control.js
| |____test.js
|____asset
| |____asset.js
| |____icon
| | |____logo.png
|____components
| |____CustomCenterView.js
| |____modal
| | |____AlertModal.js
| |____CustomText.js
| |____CustomSafeAreaView.js
|____screen
| |____Home.js
| |____Main.js
|____navigator
| |____BottomNavigation.js
| |____StackNavigation.js
|____functions
| |____utils.js

src 폴더 안에 직접 만든 구조이다.

 

| components

컴포넌트를 관리한다.

지금 추가한 것은 CustomCenterView, modal, CustomText, CustomSafeAreaView 를 만들었다.

 

1_ CustomCenterView.js

const CustomCenterView = ({
    children,
    width = '100%',
    height = '100%',
    backColor = '#fff'
}) => {
    return (
        <View
            style={{
                width: String(width).slice(-1) === '%' ? width : wt(Number(width)),
                height: String(height).slice(-1) === '%' ? height : ht(Number(height)),
                justifyContent: "center",
                alignItems: "center",
                backgroundColor: backColor
            }}
        >
            {children}
        </View>
    )
}

export default CustomCenterView

CustomCenterView는 안에 들어간 요소들을 모두 중앙에 배치하는 컴포넌트이다.

props으로 width,height 는 높이와 넓이를 받아주고 초기값은 100%이다.

backColor는 배경색을 의미한다.

조금 더 효율적인 방법을 찾아보고있다.

 

2_ CustomText

const CustomText = ({ text, size = 15, color = "#000", type = "Medium" }) => {
    return (
        <Text style={{ color, fontSize: font(size), fontFamily: `NotoSansKR-${type}` }}>
            {text}
        </Text>
    )
}


export default CustomText

현재는 NotoSansKR 폰트만 적용되어있다.

props 로는 text, size, color, type을 받는다.

 

text는 렌더링할 문자열을 넘겨주고

size는 텍스트의 크기를 적어주면 조금 있다가 나올 responsive 함수가 저 값을 넘겨받아 기기의 크기마다 다른 크기를 준다.

color는 텍스트의 색상을 넘겨준다.

type이 가장 고민이였다.

타입은 총 Black | Bold | Light | Medium | Regular | Thin 이렇게 6가지 중 하나를 넘겨줘야한다.

타입스크립트를 사용했다면 더욱 더 엄격하게 props를 관리했겠지만

자바스크립트를 사용했을 시 저 위의 값이 아닌값이 들어오면 그냥 Medium으로 return 하게 따로 코드를 작성해줘야 할거같다.

 

 

3_ CustomSafeAreaView.js

const CustomSafeAreaView = ({ children, backColor = "#fff" }) => {
    return (
        <SafeAreaView style={{ flex: 1, backgroundColor: backColor }}>
            {children}
        </SafeAreaView>
    )
}

export default CustomSafeAreaView

주로 SafeAreaView를 사용할 때 flex: 1을 기본적으로 주고 화면을 그리는 편이다.

그래서 저 컴포넌트를 항상 감싸서 화면을 그리도록 했다.

backColor 는 화면의 색상을 지정한다. 기본값은 흰색인 "#fff" 이다.

 

| functions

/**
 * @function sliceText
 * @param {string} text = 자를 문자열 
 * @param {number} length = 몇 글자 까지만 보이게 할지 설정하는 숫자
 * @returns {String} = ex. test...
 */
export const sliceText = (text, length = 10) => {
    if (text?.length > 10) {
        return `${text.slice(0, length)}...`
    } else {
        return `${text}`
    }
}

functions 폴더는 자주 사용하는 export function을 모아놓는다.

위의 코드는 매개변수를 두개를 받는다.

text는 출력할 문자열이고 length는 몇 글자까지 보일지 설정한다.

기본적으로 length는 10으로 설정되어있다.

그러나 조건으로는 10글자 이하면 그냥 원본 텍스트를 출력하게 했다.

 

| navigator

1. BottomNavigation.js

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
import React from 'react'
import Main from '../screen/Main';

const Tab = createBottomTabNavigator();

const BottomNavigation = () => {
    return (
        <Tab.Navigator
            initialRouteName='Main'
            screenOptions={{
                headerShown: false
            }}
        >
            <Tab.Screen name="Main" component={Main} />
        </Tab.Navigator>
    )
}

export default BottomNavigation

react-navigation/bottom-tabs 이다.

하단에 네비게이터를 미리 세팅했다.

더 추가하려면

<Tab.Screen name="" component={} />

이 한줄에 name과 component만 추가하면 된다.

 

2. StackNavigation.js

import { NavigationContainer } from '@react-navigation/native'
import { createNativeStackNavigator } from '@react-navigation/native-stack'
import React from 'react'
import Home from '../screen/Home';

const StackNavigation = () => {

    const Stack = createNativeStackNavigator();

    return (
        <NavigationContainer>
            <Stack.Navigator
                initialRouteName='Home'
                screenOptions={{
                    headerShown: false
                }}
            >
                {/* Stack default */}
                <Stack.Screen name="Home" component={Home} />

                {/* Bottom Navigation */}
                {/* <Stack.Screen name="Home" component={BottomNavigation} /> */}
            </Stack.Navigator>
        </NavigationContainer>
    )
}

export default StackNavigation

그냥 사용해도 되지만 BottomNavigation을 사용하려면 밑에 있는 주석을 풀면 된다.

 

| asset

|____asset
| |____asset.js
| |____icon
| | |____logo.png

asset으로 들어가면 구조는 이렇게 되어있다.

현재는 그냥 회사 로고만 icon 폴더에 넣어놨다.

중요한 부분은 asset.js이다.

 

// asset.js

export const ICON = {
    logo: require('../asset/icon/logo.png'),
}

이렇게 객체로 만들어서 꺼내서 사용할 수 있다.

접근 시에는 ICON.logo 나 ICON['logo'] 로 가져와서 asset파일들을 가져올 수 있다.

이렇게 만든 이유는 asset을 한 파일 내에서 관리하고 하나의 이미지를 여러 컴포넌트에서 사용할 때 import를 남발하지 않기 위해서 만들었다.

 

| package.json (dependencies)

"dependencies": {
    "@react-navigation/bottom-tabs": "^6.5.8",
    "@react-navigation/native": "^6.1.7",
    "@react-navigation/native-stack": "^6.9.13",
    "axios": "^1.4.0",
    "lottie-react-native": "^5.1.6",
    "moment": "^2.29.4",
    "react": "17.0.2",
    "react-native": "0.68.2",
    "react-native-modal": "^13.0.1",
    "react-native-responsive-dimensions": "^3.1.1",
    "react-native-safe-area-context": "^4.7.1",
    "react-native-screens": "^3.22.1",
    "react-native-status-bar-height": "^2.6.0",
    "react-native-uuid": "^2.0.1",
    "recoil": "^0.7.7",
    "styled-component": "^2.8.0"
 }

일단 navigation 관련된건 모두 세팅이 완료되어있다.

아직 top navigation은 없지만 추가할 예정이다.

axios, lottie, moment, recoil 등 세팅되어있지만

다른 모듈은 직접 커스텀해서 사용하면 될거같다.

 

프로젝트는 https://github.com/JihooDev/react-native-template

GitHub - JihooDev/react-native-template

이 곳에서 clone 받을 수 있다.