[ReactNative] RN+Express+Mysql 게시판 앱 제작하기 :: #1. React Native란?

 

음 원래는 cafe24 데이터베이스 연동을 포스팅하려 했으나 지금 새로 하고있는

RN 앱개발 일지를 먼저 쓰려고 한다. 개발쪼렙인 나에게 새로운 개념은 너무 어렵다. 

그래도 계속 파다보면 언젠가는 이해가 되고 체화가 되니 존버해보도록 하자. 존버 always win!

.

.

.

1.React Native란? 

 

react의 접근방법을 모바일로 확장한 Facebook의 오픈소스 프로젝트다. JavaScript를 기본언어로 하며, 이를 통해 코딩한 React 컴포넌트는 React native를 거쳐 ios, android 코드로 각각 변환된다. (컴포넌트란 각 기능들을 나눠놓은 단위라고 생각하면 된다.)

 

2. ReactJS vs React Native 

Problem - 1 리액트는 리액튼데 리액트와 리액트 네이티브는 뭐가 다를까? 일단 여기서부터 멘붕이다. 리액트로 웹개발을 해봤으면 리액트 네이티브도 껌일까? 아니면 다르게 개발해야하나? 나는 모바일앱을 만들고 싶은데 어떻게 해야하지? 

 

Idea 1. 궁금증 해결을 위해 인터넷에 서치를 해봤다. 음 기기별 호환성 스타일 어쩌구 다양한 고려사항이 있었지만 다 못알아 먹었기 때문에 리액트와 리액트네이티브의 다른점 부분만 집중해서 읽었다. 음... 어려운 말들이 많아서 완벽하게 이해는 못하겠다만 리액트와 리액트 네이티브는 동작방식이 좀 다르다. 어떻게 다르냐고? 일단 웹에서 URL은 Stack구조로 처리된다. ReactJS는 웹개발용 프레임워크이기 때문에 Stack구조로 처리되는 것이다. 

 

Idea 2. 여기서 또 궁금증... Stack구조가 뭔데??

Stack의 가장 중요한 개념은 LIFO(Last In First Out) 쉽게 말해서 마지막으로 들어온 것이 먼저 나간다는 뜻이다. Stack은 비유하자면 데이터를 담는 바구니다. 바구니에 데이터를 넣다보면 마지막에 넣은 것이 맨 위로 올라간다. 꺼낼 때도 가장 위에 있는 마지막 데이터를 꺼내게 되는 것이다. (근데 이 개념은 좀 신기하다. 선입선출이 기본 아닌가!? 파바 알바하면 잘릴듯) 

 

아무튼 Stack구조란 이런 것이다. 웹에선 스택구조를 바탕으로 push하거나 pop해서 다른 페이지로 이동하거나 뒤로간다. 하지만 모바일 환경에서는 이러한 Stack구조의 네이게이터가 존재하지 않는다. 그렇기 때문에 리액트 네이티브는  react-navigation을 사용한다. 이는 react-native에 글로벌 stack 네비게이터를 제공해주고, 관리한다. 

 

 

Solved - 왜 react navigation이 stack을 중첩하여 스크린을 제공하는지는 모르겠지만 아무튼 리액트와 리액트 네이티브는 이렇게 작동방식에서 차이가 있다. 하지만 리액트 네이티브는 결국 리액트의 접근방식을 모바일로 확장한 것이므로 기본적인 디자인은 같다.

 

- React native 홈페이지의 소개글...

 

" React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components. "

 

 - 리액트 네이티브는 오직 자바스크립트만을 이용하여 앱을 만들 수 있게 해준다. 리액트 네이티브는 리액트와 같은 디자인을 사용함으로써선언적인 컴포넌트를 통한 풍부한 모바일 UI를 만들 수 있게 해준다.

 

.

.

.

.

 

React, React Native에 대해 간략하게 알아보았으니 이제 개발에 들어가보도록 하겠다. 줫도 모르지만 하다보면 된다!

나의 개발원료는 패기다 패기!!