React Native 개발 환경 구성하기

React는 cra를 통해서 간단하게 설치가 가능하다. 

하지만 React Native 역시 간단 설치가 가능한데, 프로젝트를 본격적으로 진행한 적이 없어서 정리하면서 같이 진행할 

계획이다. 

( 전에 GPT로 만든 React Native는 ... 제외! )

 

Android Studio는 설치가 되어 있다고 생각하고 프로젝트를 진행하겠다. 

그게 아니고 완전 최초 상태라면 공식 문서를 참고해서 Android Studio를 설치하는 것을 먼저 진행하자!

 

개발 환경은 Expo가 아닌 React Native를 사용해서 개발을 할 생각이다. 

Expo는 프로젝트가 생각보다 자유롭지 않아서 개발 시 많은 불편함이 있었다. 

 

그 외에는 Styled-Components, Tanstack Query, Zustand를 기본 베이스로 개발할 생각이다. 

 

프로젝트 설치

npx react-native@latest init [project name]

 

cra와 같은 react-native 명령어를 통해서 프로젝트를 만들면 된다. 

특정 버전을 사용하고 싶다면 --version 옵션을 사용하고 특정 템플릿을 사용하고 싶다면 --template을 사용하면 된다. 

 

eslint 설정

React Native 프로젝트를 설치하면 eslint가 설치되어 있다. 

npm i --save-dev @eslint/create-config@0.4.6

 

하지만 eslint 설치 속성이 버전이 올라가면서 달라졌는데, 이것을 맞추기 위해서 eslint의 create-config를 변경해준다.

npx eslint --init

 

eslint 설정을 위한 명령어이다. 

? How would you like to use ESLint? ... 
  To check syntax only
> To check syntax and find problems

 

명령어를 입력하면 위와 같은 선택지를 제공받는다. 

eslint를 어떻게 사용할 것인가~? 인데 문법 체크만 할 수 있고 문법 체크와 문제 찾기 둘다 가능하다. 

 

본인은 문제 찾기도 함께 사용하려고 한다. 

? What type of modules does your project use? ... 
> JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these

 

다음으론 모듈을 어떤 방식으로 사용하는지 물어보는데 import/export 방식을 사용하므로 해당 옵션을 바로 선택

? Which framework does your project use? ...       
> React
  Vue.js
  None of these

 

이제 프레임워크를 사용하는지 물어보는데 React를 사용한다고 선택한다.

? Does your project use TypeScript? ...
  No
> Yes

 

타입스크립트를 사용하는지 물어보는데 타입스크립트를 사용하지 않는 환경이다. 

? Where does your code run? ...  (Press <space> to select, <a> to toggle all, <i> to invert selection)
√ Browser
√ Node

 

브라우저 환경에서 코드가 실행되는지 물어보는데 Browser 를 선택해준다. 

만약 ServerSide 환경이라면 Node를 선택하면 된다. 

? How would you like to define a style for your project? ...
> Use a popular style guide
  Answer questions about your style

 

본인만의 eslint 스타일이 있는지 아니면 대중적으로 사용하는 버전을 사용할지 물어보는데 airbnb 설정을 할 것이므로

대중적인 버전을 선택한다.

 

create-config가 최신버전 ( 작성 시 1.1.0 )의 경우 바로 해당 옵션이 없고 바로 설치가 종료되는데, 

0.4.6버전은 eslint 설정을 제공하므로 이 버전을 사용한 것이다. 

? Which style guide do you want to follow? ...
> Airbnb: https://github.com/airbnb/javascript
  Standard: https://github.com/standard/standard        
  Google: https://github.com/google/eslint-config-google
  XO: https://github.com/xojs/eslint-config-xo

 

airbnb를 사용할 것이므로 선택해준다. 

? What format do you want your config file to be in? ... 
> JavaScript
  YAML
  JSON

 

설정 파일을 js로 할것인지, yaml 또는 json으로 할 것인지 물어보는 부분인데 react-native 초기 설정으로 미리 

js 파일이 있으므로 JavaScript를 선택해준다. 

eslint-config-airbnb@latest eslint@^7.32.0 || ^8.2.0 eslint-plugin-import@^2.25.3 eslint-plugin-jsx-a11y@^6.5.1 eslint-plugin-react@^7.28.0 eslint-plugin-react-hooks@^4.3.0     
? Would you like to install them now? » No / Yes

 

필요한 패키지를 설치할 것인지  물어보는 부분인데 당연히 사용할 것이므로 Yes를 선택해서 설치를 해준다. 

Jest 설정

cra로 react-native를 만들면 jest는 설치되어 있다. 

하지만 그 외 testing-library를 사용해서 테스트 코드를 작성할 때 조금 더 쉽게 하려고 한다. 

npm i --save-dev @testing-library/react-native @testing-library/jest-native

 

testing-library/react-native를 통해 react-native용 설치를 진행하고 jest와 매칭을 위해서 jest-navtive를 추가로 

설치해준다. 

 

만약 cra로 만드는게 아니라면 추가로 jest와 react-test-renderer를 설치해주면 된다.

라이브러리 설치가 끝나면 설정 파일을 작성할 시간이다. jest.config.js 파일을 수정해준다. 

module.exports = {
  preset: 'react-native',
};

 

 

이젠 package.json에 테스트용 스크립트를 만들어준다. 

"scripts": {
    // ...
    "test": "jest"
},

 

끝나면 npm run test 명령어를 통해서 테스트를 진행할 수 있다. 

 

Styled Components 설정 

npm i --save styled-components

 

styled components를 사용하기 위해서 당연히 styled-components 라이브러리를 설치해준다. 

이후 디버깅 시 class명 확인을 쉽게 할 수있도록 babel-plugin-styled-components를 설치해준다. 

npm i --save-dev babel-plugin-styled-components

 

이때 위와 같은 오류가 발생할 수 있다. npm의 의존성 트리를 해결할 수 없을 때 발생하는 문제로 --legacy-peer-deps

옵션을 사용하면 해결할 수 있다. 

npm install styled-components --legacy-peer-deps
npm i --save-dev babel-plugin-styled-components --legacy-perr-deps

 

설치한 babel 플러그인을 babel.config.js에 설정해준다. 

module.exports = {
  // ...
  plugins: ['babel-plugin-styled-components'],
};