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

React Native에서 Animated를 사용하여 컴포넌트에 움직임을 넣거나 색상, 투명도 등이 변경되도록 애니메이션을 만들 수 있습니다. Animated는 State나 변수 등을 직접 제어하지 않고, Animated 객체로 생성된 value를 제어하는 것으로 애니메이션을 만듭니다. 애니메이션을 실행하면 시간에 따라 value가 변하는데, 이때 rerender는 이루어지지 않으며 실시간으로 반영됩니다. (rerender와 연관이 없으므로 케이스에 따라 shouldComponentUpdate를 false로 해놓는 것도 좋습니다.) import React, {Component} from 'react'; import {View, Animated} from 'react-native'; type Props =..

이 글은 6.React Native Navigation 기초 - 1부 설치하기 6.React Native Navigation 기초 - 2부 화면 등록, 화면 이동(startapp, push, pop) 6.React Native Navigation 기초 - 3부 기능 살펴보기(현재글)로 구성되어 있습니다. (19.08.05)react-navigation 예제가 추가되었습니다. 이번 글에서는 사이드 메뉴인 Drawer와 그를 통제하기 위한 Deeplink, 그리고 다른 주요 기능에 대해 알아보겠습니다. 1.Drawer Drawer은 좌측 또는 우측에 숨어있는 메뉴입니다. 이 메뉴는 Navigation으로 앱을 실행하는 부분에서 설정할 수 있습니다. Navigation.startSingleScreenApp()..

이 글은6.React Native Navigation 기초 - 1부 설치하기6.React Native Navigation 기초 - 2부 화면 등록, 화면 이동(startapp, push, pop)(현재글)6.React Native Navigation 기초 - 3부 기능 살펴보기로 구성되어 있습니다. (19.08.05)react-navigation 예제가 추가되었습니다. 이번 글에서는 React Native Navigation의 화면 등록과 이동 과정에 대해 알아보겠습니다.근데 매번 풀네임으로 쓰기 너무 힘드네요.. React Native Navigation(이하 rnn)으로 칭하겠습니다. 순환신경망 아니쥬~ 1.일단 예제는 rnn의 깃헙에 들어가셔서 클론하면 Wix 형님들이 만들어두신 example을 사..

이 글은6.React Native Navigation 기초 - 1부 설치하기(현재글)6.React Native Navigation 기초 - 2부 화면 등록, 화면 이동(startapp, push, pop)6.React Native Navigation 기초 - 3부 기능 살펴보기로 구성되어 있습니다. (19.08.05)react-navigation 예제가 추가되었습니다. 우리가 사용하는 일반적인 앱들은 버튼을 누르면 새로운 화면으로 이동하고, 뒤로가기 버튼(혹은 제스처)을 누르면 다시 이전화면으로 이동하는 모습을 볼 수 있습니다. 지난 글에서 3가지 화면(시작 화면, 회원가입 화면, 로그인 화면)을 구현했는데, 그렇다면 리액트 네이티브에서 화면 간 이동이 가능하도록 구현 하려면 어떻게 해야할까요? 바로 N..

이 글은 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 마무리(현재글)로 구성되어있습니다. 바로 이어서 시작하겠습니다. 1.이미지 컴포넌트 이미지 컴포넌트에 이미지를 지정해주기 위해서 source라는 속성을 명시해줘야합니다. source는 {uri : '이미지 주소'}로 외부 주소를 통해 가져오거나 require('로컬경로')를 통해 내부의 이미지를 사용할 수 있습니다. uri와 r..

이 글은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...