학습일지/프론트엔드

[ React Native ] React에서 React Native로

zinyy 2024. 4. 7. 17:00

˚ 계기

˚ 리액트 네이티브

˚ 요구 사항


「 계기 」

제가 개발 분야에 발을 들인 것은 웹 개발이었고, 특히 리액트에 많은 관심을 가지고 있었어요.

프로젝트를 기획하며 종종 "이건 앱으로 만드는 게 더 낫지 않을까?" 라는 생각이 들었지만, 리액트만으로도 공부할 부분이 많다고 생각을 했고, 그렇기에 앱 개발이라는 새로운 분야에 도전하는 것이 망설여져 선뜻 공부를 시작하지 못하고 있었어요.

 

그러던 중 겨울방학에 스터디를 하면서 만난 선배 한 분이 말씀하신 "React를 알고 있으면 React Native로 앱 개발 하는게 더 쉬울 수도 있다"고 하신 말씀에 용기를 얻을 수 있었어요.

그걸 계기로 올해 새로 시작하는 졸업작품은 앱으로 개발하는게 적합할 것 같다는 팀원들의 의견에 따라 React Native를 사용해 앱을 개발하기로 결정했습니다..!


React Native와 React

「 리액트 네이티브 」

리액트 네이티브는 리액트와 많이 비슷하면서도 중요한 차이점이 있어요.

가장 큰 차이점은, 운영체제와 직접 통신할 수 있는 Bridge 시스템을 통해 네이티브 앱의 성능을 유지하면서, 리액트의 개발 방식을 활용할 수 있다는 점이에요.

 

리액트 네이티브는 즉, 우리가 웹 개발할 때 사용하는 Javascript를 이용해 모바일 앱을 개발할 수 있게 해주는 도구에요.

중요한 점은, 단순히 웹 앱을 모바일로 옮겨오는 것이 아니라, 각 운영체제와 통신할 수 있는 Bridge 시스템을 통해 '진짜' 모바일 앱처럼 동작하게 만들어준다는 점이에요.

「 동작 원리 」

간단히 말해, 리액트 네이티브는 마치 '번역기'와 같은 역할을 해요.

우리가 작성한 코드와 모바일 운영체제 사이에서 중재자 역할을 하며, 우리의 코드를 iOS나 안드로이드 코드로 '번역'하여 실행하는 거죠.

이 과정에서 Bridge가 중요한 역할을 합니다.

이 덕분에 Javascript로 작성된 로직이 실제 모바일 기기에서 실행될 수 있죠.

 

이런 특성 때문에, 리액트 네이티브는 웹 개발자들이 기존에 알고 있는 Javascript를 활용하여 앱을 개발할 수가 있게 되는 것이랍니다.

물론, 플랫폼의 특정 기능을 사용하고자 할 때는 그 플랫폼의 기본 언어인 Java나 Swift에 대한 이해도가 필요하다는 점을 기억하셔야 해요 !


「 요구 사항 」

React에 대한 기본 지식

 

리액트 네이티브로 개발을 하기 위해서 리액트를 꼭 잘해야 하는 건 아니지만,  리액트 경험이 있다면 큰 도움이 될 수 있어요.

리액트에서 쓰이는 state, props, component 같은 개념들에 이미 익숙하다면, 리액트 네이티브로의 전환 과정이 그렇게  어렵다고 느껴지지 않을 거예요.

 

개발 환경 세팅

 

개발 환경 설정도 중요한 요소에요.

React Native는 웹을 개발하는 것이 아니라 앱을 개발하는 것이 목적이기 때문에 앱을 만드는데 필요한 모든 소프트웨어를 다운받아야 해요.

안드로이드 앱을 개발하고 싶다면, 안드로이드 스튜디오와 Java, Android SDK, 그리고 시뮬레이터가 필요해요.

iOS 앱 개발을 위해서는 Xcode와 시뮬레이터를 준비해야 하죠.

 

그런데, 단순히 테스트 목적이라면 복잡한 설정 없이 VSCode에서 바로 개발하고 테스트해볼 수 있는 EXPO를 사용하는 방법도 있어요.

EXPO는 복잡한 환경 설정 없이도 개발을 할 수 있도록 해주기 때문에

처음 시작할 때는 EXPO를 이용하여 개발 환경을 간단히 세팅하고, 실제 디바이스나 애뮬레이터에서 앱을 실행해보는 것이 좋아요.

 

물론, 개발한 앱을 출시한다거나 보다 전문적으로 공부하고 개발을 하고 싶다면, 필요한 소프트웨어를 모두 설치하는 것이 필수예요.

 

하지만 저는 본격적으로 개발에 앞서 기본적인 앱 구조와 컴포넌트 사용법을 익히는 것을 목표로 했기 때문에, 우선 EXPO를 통해 간단하게 공부를 시작했어요.

EXPO를 이용한 개발 환경 설정 방법은 다음 포스팅에서 자세히 다룰 예정이니 다음 글에서 확인해주세요 !

 

[ React Native ] Expo로 개발 환경 설정

˚ Expo를 사용하는 이유 ˚ 설치 ˚ 실행 React Native는 웹을 개발하는 것이 아니라 앱을 개발하는 것이 목적이기 때문에 앱을 만드는데 필요한 모든 소프트웨어를 다운받아야 해요. 일반적으로 안드

zinyy.tistory.com


 

리액트 네이티브를 본격적으로 시작하기 전, Nomad Coder에서 리액트 네이티브에 익숙해지기 위한 학습을 할 예정이다.

앞으로 강의에서 배운, 학습한 결과물을 블로그에 올리면서 꾸준히 공부해봐야지 .. :)