어서와, 개발은 처음이지?

이 글은5.React Native 레이아웃 디자인 - 1부 flex와 width, height5.React Native 레이아웃 디자인 - 2부 배치(Flex Direction)와 정렬(justify content, align items)5.React Native 레이아웃 디자인 - 3부 커스텀 버튼(현재글) 5.React Native 레이아웃 디자인 - 4부 이미지 컴포넌트와 UI 마무리로 구성되어있습니다. 정신없이 휘몰아치다보면 목적지가 어딘지 깜빡할 때가 있죠. :)우리가 모방하려고 했던 화면의 모습이 기억 나시나요? 혹시 기억이 안나실까봐 다시 가져왔습니다. 자, 우리는 지난시간동안 레이아웃 잡는데 필요한 여러가지 속성을 알아봤습니다.이번에는 5-1번 글에서 작성한 레이아웃을 토대로 화면을 구성할..

이 글은5.React Native 레이아웃 디자인 - 1부 flex와 width, height5.React Native 레이아웃 디자인 - 2부 배치(Flex Direction)와 정렬(justify content, align items)(현재글)5.React Native 레이아웃 디자인 - 3부 커스텀 버튼 5.React Native 레이아웃 디자인 - 4부 이미지 컴포넌트와 UI 마무리로 구성되어있습니다. 지난 글에서는 View의 width, height와 flex 속성을 이용하여 각 컴포넌트의 영역을 잡아봤습니다.이번 글에서는 지난 글에서 미처 다루지 못했던 레이아웃 배치와 정렬에 관한 내용을 다뤄보겠습니다. 1.Flex Direction 혹시 지금까지 진행해 오면서 컴포넌트들이 세로로만 쌓였다는걸..

이 글은5.React Native 레이아웃 디자인 - 1부 flex와 width, height(현재글)5.React Native 레이아웃 디자인 - 2부 배치(Flex Direction)와 정렬(justify content, align items)5.React Native 레이아웃 디자인 - 3부 커스텀 버튼 5.React Native 레이아웃 디자인 - 4부 이미지 컴포넌트와 UI 마무리로 구성되어있습니다. 지난 시간동안 JSX, 기본 컴포넌트, State와 Props등 React Native를 사용하기 위한 기초 지식들을 알아봤는데요.드디어 실전의 시간이 왔습니다! 이번 시간부터 레이아웃 잡는 법, 화면 이동(관리), 애니메이션, 모션 제어에 대해 순서대로 알아보겠습니다. 1.레이아웃 나누기 저는 앱..

이 글은 4.React Native State와 Props - 1부(State)와 이어집니다 Props props는 커스텀 컴포넌트와 관계가 깊습니다. 썩 와닿는 예는 아니지만 이번엔 사용자 별로 버튼을 각각 만든다고 가정해봅니다. 거두절미하고 코드부터 보시죠 일단 프로젝트 안에 TestComponent.js라는 파일을 만들고, 아래 코드를 붙여줍니다. import React, {Component} from 'react'; import {StyleSheet, Button, View} from 'react-native'; import TestComponent from './TestComponent'; const datas = [ {id:"gdHong",count:0,color:"red"}, {id:"ksY..

이 글은 4.React Native State와 Props - 2부(Props)와 이어집니다 지난 글에서 JSX와 함께 State와 Props가 언급되었습니다. 리액트는 State와 Props라는 객체를 사용하여 화면에 표시되는 가변적인 값들을 관리합니다. State와 Props는 몇가지 특징을 가지고 있습니다. State와 Props의 특징 1. Props 혹은 State에 변경이 감지될 때마다 render()가 수행된다. (이는 리액트의 최적화와도 관련있습니다.) 2. State에는 현재 컴포넌트의 화면을 그리는 것과 관련된 대다수의 값들을 담는다. 3. 데이터의 흐름은 상위 컴포넌트에서 하위 컴포넌트로 단방향이다. 4. Props에는 상위 컴포넌트에서 전달받은 값이 담겨있으며 변경 불가능하다. 5...

지난 글에서는 프로젝트를 시작하기 앞서 init 프로젝트의 구조, 프로젝트 실행 시 디버그 서버 실행에 대한 내용을 간략하게 알아봤습니다. 이번 시간에는 App.js의 render() 함수에 XML처럼 들어가있는 JSX 문법과 기본 컴포넌트(Basic Component)를 알아보겠습니다. 1.JSX 우리는 이전에 App.js의 render() 함수에서 JSX를 본 적 있습니다. JSX는 의 모양으로, 컴포넌트를 열어주는 부분과 닫아주는 부분으로 이루어져 있습니다. * 태그를 열었으면 꼭 닫아주셔야 에러가 나지 않습니다. XML 혹은 HTML을 다뤄보셨다면 낯이 익으실텐데요. 만약 이러한 형식을 처음 접하신다면, 검색 혹은 이곳에서 간단하게 HTML을 체험해 보는게 좋을 것 같습니다. (코딩을 처음해..

지난 글에서 React Native 설치와, 기본 프로젝트 생성 및 가상 디바이스에서 실행하는 방법을 알아봤습니다. 그럼 본격적으로 디자인 작업에 들어가기 전에 지난번에 말씀드렸던 프로젝트 구조와 커맨드 창에 대한 간단한 설명, 디버깅에 대해 알아보겠습니다. 1. 커맨드 창 지난 글에서 react-native run-android 혹은 run-ios 명령을 통해 가상 디바이스에서 프로젝트를 실행해봤었죠? 이 명령어를 실행하면 새로운 커맨드 창이 등장하면서 뭔가 로딩되는 화면을 볼 수 있었는데요. 사실은 우리 프로젝트의 번들링 상황을 나타내는 것입니다. react-native는 코드 변경시, 안드로이드/iOS 개발 환경처럼 새롭게 빌드를 할 필요 없이 변경사항이 자동으로 적용됩니다. 실질적으로 우리의 개발..

지난 시간에는 꿀잼 리액트의 매력을 나열해봤습니다. 본디 React.js부터 시작하는게 순서가 아니겠나 싶지만 현재 React Native 프로젝트를 진행중이기 때문에 까먹지 않기 위해 React Native의 시작부터 디자인, 기능 개발과 릴리즈 버전 빌드에 대한 내용을 순차적으로 다뤄보겠습니다. 이번 시간에는 React Native를 설치와 실행하는 법을 알아보겠습니다.(설치한다는 표현이 맞을지 모르겠네요.) 이 글이 끝날때쯤 여러분은 Android앱과 iOS앱 둘다 만들 수 있는 개발자가 되는것이죠. (이제 연봉 협상할 때 안드 2700 ios 2700을 들걸 내가 4000을 받고 한방에 해주겠소! 하고 자신있게 말하세요) 미리 언급하자면 저의 React Native버전은 0.55이고, 공식문서는 ..