React Native

Expo - Typescript 적용 & 화면 구현 및 css

크런키스틱 2023. 4. 14. 13:54
728x90

1. Typescript 적용

touch tsconfig.json

생성된 tsconfig.json 파일을 아래와 같이 수정한다.

{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "strict": true
  }
}

이 후, 기존에 생성된 js 파일을 ts로 변경하고 앞으로 생성되는 파일들은 ts, tsx로 확장자명을 부여한다.

npx expo start를 실행하면 필요한 typescript 및 개발용 npm 들이 자동 설치된다.

 

 

2. 태그

expo는 일반적인 html 태그와 다르게 고유의 태그들이 존재한다.

가장 많이 사용되는 것들 세개만 정리하자면 다음과 같다.

  1. View : html의 div와 같은 태그
  2. Text : html의 p와 같은 태그, 텍스트를 사용하려면 반드시 Text 태그로 감싸야 한다.
  3. Pressable: html의 button과 같은 태그

그 외, 필요한 기본 태그들은 아래 공식문서를 통해 확인해보고, 여기서는 자연스럽게 나오면 설명하도록 한다.

https://reactnative.dev/docs/components-and-apis

Button 태그도 존재하지만 일반적으로 Pressable을 이용하는데 그 이유는 Button 태그는 android와 ios에서 디자인이 달라지는 경우가 있다고 한다.

 

3. css 적용

기본적으로 React-Native에서 css 적용하는 방법은 class 형태로 StyleSheet를 통해 class를 선언하고 값들을 넣어 사용하는 일반적인 방식이다.

다만 주의할 점은 기존 web에서 사용하는 css name과 좀 다른 경우가 있으며(없는 css도 있다), 값이 다른 경우도 있다.

예를 들어, 기존 web css에서 flex는 display에서 값으로 사용되지만, 모바일에서는 container 즉, View를 차지하는 비율을 결정하기 위한 값이다.

flex: 1은 화면 전체를 1의 비율만큼 차지한다는 뜻이다.

 

4. nativewind

하지만, 본인은 저렇게 일일히 값을 넣는걸 좀 귀찮아해서... 사용법이 좀 더 편하다고 느끼는 nativewind를 사용한다.

nativewind는 모바일에서 사용가능한 tailwindcss를 기반으로 제공되는 universal style system이다.

템플릿이라고 쉽게 생각하면 된다.

적용법 역시 간단하다.

yarn add nativewind
yarn add -D tailwindcss
npx tailwindcss init

위 명령어를 차례대로 실행하면 tailwindcss config 파일이 생성되는데 이 파일을 아래처럼 수정해준다.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./App.{js,jsx,ts,tsx}", ".//**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

기존 bable.config.js에도 내용을 아래처럼 추가해준다.

module.exports = function (api) {
  api.cache(true);
  return {
    plugins: ["nativewind/babel"],
    presets: ["babel-preset-expo"],
  };
};

또한, typescript를 사용하고 있기 때문에 app.d.ts 파일을 생성한 후, 아래 내용을 추가해야 에러가 나지 않는다.

/// <reference types="nativewind/types" />

그 후, 사용 방법은 간단하다.

<View className="flex items-center">
    <Text className="text-3xl font-bold text-blue-600">
        안녕~
    </Text>
</View>

위는 일부분 예시로 각 태그에 className에 tailwindcss에서 제공하는 방식의 class들을 넣어주면 된다.

코드는 다소 길어지지만 bootstrap과 같은 템플릿과 유사한 방법으로 굉장히 간단하게 css를 수정가능하다.

728x90