차근차근

0. react-native init 프로젝트 구조 react-native init test로 프로젝트를 생성하면 다음과 같은 구조를 볼 수 있다. android/ 안드로이드 네이티브 모듈을 담당하고 있다. 카카오톡으로 로그인하기처럼 react-native에서 지원하지 않는 기능들을 사용하기 위해서는 네이티브 모듈을 직접 구현해야 한다. ios/ ios의 네이티브 모듈을 담당하고 있다. node_modules 프로젝트와 관련된 모듈들이다. npm을 통해 설치한 모듈이 이곳에 위치한다. App.js 실제 디바이스에 표시되는 코드가 이곳에서 작성된다. App.js를 열어보면 View, Text 컴포넌트와 'Welcome to React Native!"같은 문자열이 있다. app.json 프로젝트의 이름과 앱..

0. Redux 리덕스는 state management 툴이다. 리덕스가 필요한 이유는, 컴포넌트는 local state를 가지고 있고, 앱은 global state를 가지고 있기 때문이다. 예를 들어, 인스타그램 사진이 하트를 만든다고 할 때 하트는 2개의 state가 있다. 하트누르면 빨간색, 안누르면 회색. 이 컴포넌트는 local state이 있는 것이다. 문제는 앱은 많은 컴포넌트를 기반으로 지어졌는데 또한 동시에 global state를 가지고 있다. global state의 예시는 유저가 로그인을 했느냐, 안했느냐의 여부이다. global state에서는 모든 컴포넌트가 영향을 받는다. 유저가 로그인을 했느냐, 안했느냐에 따라 앱이 어떻게 보이는지도 다르다. 즉, global state, l..

0. Basic React Native Concepts RN의 가장 기본적인 컨셉은 더이상 div, html이 없다는 것이다. 이것은 return 할 수 있는 컴포넌트가 정해져 있다는 뜻이다. 아와 같은 컴포넌트는 RN documentation에서 확인할 수 있다. view 컴포넌트를 이용하면 ios/android환경에 따라 objective-c 혹은 java로 변한다. RN은 굉장히 엄격하다. CSS와 비슷한 Style이라는 것을 사용한다. 1. React Native Layouts with Flexbox flexbox로 디자인을 짤 수 있는 앱은 RN이 유일하다. 기존 css와 백프로 동일하진않지만 비슷하다. 디폴트 설정으로 RN은 flex direction이 column이다. html, css에서는..

0. React Native React Native는 네이티브 웹 어플리케이션을 빌드하게 도와주는 UI 라이브러리이다. 줄여서 RN이라고 부르겠다. RN은 html, css 어플리케이션을 생성하지 않는다. 마지막 컴파일링 할 때, 각각 iOS(objective-C) / android(java) 네이티브 코드로 실행이 된다. RN이 구동되는 방법은 JSX, 자바스크립트로 작성을 하고, 그 뒤에서 자바스크립트가 objective-c 혹은 java로 변환되는 것이다. 페이스북이 개발한 이 기술에 의하여 js - objective-c , js - java 의 다리(bridge)가 연결되는 것이다. react js 코드와 비슷하다. 차이점은 다른 패키지를 쓰는데, 그 패키지 이름이 react native이다. 웹..