[RN] CMC 1주차 과제 - 환경세팅, TODO 앱 구현

학습목표

• 환경세팅
• 네비게이션
• 스타일링 익숙해지기

환경세팅 (윈도우 환경)

• 오라클 jdk17 설치
  • JAVA_HOME 환경변수 설정
• 안드로이드 스튜디오 설치
  • Android SDK Platform 31
  • Intel x86 Atom_64 System Image
  • Google APIs Intel x86 Atom System Image
  • ANDROID_HOME 환경변수 설정
  • 애뮬레이터 설정

※ 안드로이드 스튜디오 실행 없이 애뮬레이터 실행하기
관리자 권한으로 cmd 실행 후
cd C:\Users\USER\AppData\Local\Android\Sdk\emulator  // 애뮬레이터가 설치된 폴더로 이동
emulator -avd Pixel_2_API_31(애뮬레이터 이름) // 애뮬레이터 실행 명령어

• React-Native cli 프로젝트 생성

npm install typescript @types/react @types/react-native --save-dev
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
npx react-native init week1 --template react-native-template-typescript
npm run

 

---

네비게이션

stack navigator안에 bottom tab navigator를 삽입한 nesting navigator를 사용
그 이유는 탭이 없는 화면도 만들고 싶기 때문.

 

설치

npm i @react-navigation/native @react-navigation/native-stack @react-navigation/bottom-tabs

 

기본 구조

App.tsx - stack naviator

 

BottomNavigation.tsx

 

※ 네비게이션 props type 정의

type RootStackParamList = {
  Home: undefined;
  AddToDo: undefined;
};

type RootTabParamList = {
  Home: undefined;
  AddToDo: undefined;
  Setting: undefined;
}

---

React-Native에서 svg 사용하기

npm install react-native-svg
npm install react-native-svg-transformer

// ios 환경
cd ios
pod install
cd ..

 

루트 경로에 metro.config.js 파일 생성 후 아래 코드 붙여넣기

const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');

const defaultConfig = getDefaultConfig(__dirname);
const {assetExts, sourceExts} = defaultConfig.resolver;

/**
 * Metro configuration
 * https://facebook.github.io/metro/docs/configuration
 *
 * @type {import('metro-config').MetroConfig}
 */
const config = {
  transformer: {
    babelTransformerPath: require.resolve('react-native-svg-transformer'),
  },
  resolver: {
    assetExts: assetExts.filter(ext => ext !== 'svg'),
    sourceExts: [...sourceExts, 'svg'],
  },
};

module.exports = mergeConfig(defaultConfig, config);

 

타입스크립트의 경우 declations.d.ts 생성 후 아래 코드 붙여넣기

declare module "*.svg" {
  import React from "react";
  import { SvgProps } from "react-native-svg";
  const content: React.FC<SvgProps>;
  export default content;
}

 

※ svg에 동적 컬러 적용하기

svg 파일의 path 맨 뒤에 있는 fill 값을 currentColor로 바꿔주고 컴포넌트로 가져온 뒤 color 속성 값을 넘겨준다.

import Add from '../assets/icons/add.svg';

...

<Add width={50} height={50} color={color} />

 

 

---

상태관리 - Zustand

사실 Zustand는 이름만 들어본 상태관리 라이브러리였는데 이번 스터디를 통해서 Zustand의 인기를 실감했다.
그래서 한 번 공부해봤는데 코드가 굉장히 짧고 로직도 간결하여 러닝커브가 굉장히 낮았다. 앞으로 자주 쓰게 될 것 같아 따로 정리해보았다.

 

[React.js] Zustand 사용하기 (TS)