React Native로 IOS 개발자가 되어보자!!

요즘 최근 들어서 채용 공고를 많이 보고 있는데 그중에서 React 개발자보다 React Native의 비율이

많이 높아져서 채용하는 부분이 많아진 것 같습니다. 그래서 오늘은 엄청 큰 블로그는 아니고 React Native로

IOS 개발을 하는 단계까지의 과정을 블로그로 이야기를 해보려고 합니다.

 

먼저 블로그를 시작하기 앞서 ...ㅣ React Native에 대한 전반적인 개념에 대해서 알기 위해서 ⬇️ 

React Native 써야할까?

그러면 IOS 개발자로 되기 위해서 어떻게 해야 할지 한번 알아보겠습니다.

 

세팅 과정

brew가 설치된 가정에 터미널에서 설치하도록 하겠습니다.

brew install node
brew install watchman

 

먼저 node와 watchman 설치를 해주셔야 합니다.

npx react-native@latest init AwesomeProject

npx로 React Native로 작업을 할 VScode 폴더를 생성해 주는 단계입니다.

이제 시뮬레이션를 돌릴 Xcode의 아이폰 모각이 필요합니다. 

 

나서 Xcode의 설정으로 들어가 주셔야 합니다.

 

Command Line Tools에 Xcode 15.3 버전을 설정해 줍니다.

아까 실행시킨 VScode를 실행시키면 아래와 같은 화면으로 될 것입니다.

자 여기서 그러면 npm run ios라고 실행시키면 여기서는 monorepo 형식으로 android와 ios 두 개를 제가 만들었습니다.

 

따로 android를 하시려면 android studio를 설치해주셔야 합니다.

아!! 시뮬레이션을 반드시 켜주시고 실행시켜주셔야 합니다. 

자 이렇게 하면 ios 모바일에서 볼 수 있습니다!!

React Native 공식 문서로 세팅하기🔻

Setting up the development environment · React Native

 

제가 3일 동안 React-Native를 직접 해보면서 느낀 점

일단 스타일이 너무 불편합니다. 기본적으로 CSS를 제공을 하지 않기 때문에 JavaScript 안에 StyleSheet를
사용합니다. 또 React에서 사용하는 Tag들과 조금 다릅니다. div, span, a 등등.. 이런 Tag들은 존재하지 않습니다.

그래서 처음 하시는 분들이 많이 힘들 것 같습니다. 즉 HTML 문법을 사용하지 않으며, Components를 사용합니다.

React는 ReactDom을 사용하지만 React Native는 AppRegistry를 사용합니다.

 

React Native에서 사용하는 태그들

<View>

View 태그는 React에서의 div 태그의 역할을 합니다. 기본적으로 flex box의 속성을 가지고 있다.

<Text>

p 태그의 역할을 해줍니다. "문자열"

<Image>

기본적으로 React에서는 <img src="***" />
하지만 React Native는 <Image source = {{uri : "***"}} or {require("***")} 이런 식으로 작성을 합니다.

<TextInput>

React에서 input 태그의 속성을 가지고 있습니다.

느낀 점

기본적으로 React Native를 정말 해보고 싶었는데, 이번 계기를 통해서 해보게 되어서 신기하다.

가장 어려웠던 것은 태그들을 사용하는 방법이랑 스타일을 적용하는 방법이 조금 어려웠다. React를 사용할 때

CSS-in-JS를 자주 사용했기에 StyleSheet 안에서 스타일을 적용하는 것이 어려웠다. 

 

 

앞으로 추가적으로 React Native에 대한 블로그도 작성하면서 토이 프로젝트도 진행을 할 예정이다.