리액트

Getting Location 날씨를 받아오기 전에 내 위치를 받아와야 날씨를 알 수 있다. expo에는 이미 위치를 받아오는 모듈이 존재한다. 모듈만으로도 충분히 훌륭한 어플을 만들 수 있다고 생각이 든다.... 그렇다면, 언제나 그랬듯이 모듈을 설치해야 한다. 위치를 받아오는 모듈의 이름은 expo-location이다. 아래의 명령어를 입력하면 설치할 수 있다. expo install expo-location 모듈설치를 완료한 뒤, 문서에 나와있는 usage를 보며 사용법을 익혀보자. ( 공식문서는 글 아래에 첨부하겠음. ) import * as Location from 'expo-location'; 위와 같이 import 해주고, 함수를 이용해 받아오면 된다. 비동기 처리를 위해 asnyc & aw..

Create Loading Screen 제일 기본인 로딩 스크린을 만들었다. 강의에서는 다른 배경화면과 글씨를 썼지만 내 취향에 맞게 바꿔 보았다. 내가 만든 로딩 화면이다. 밋밋한 배경이 싫어서 그러데이션을 넣어 보았다. 그라데이션을 사용하려면 모듈을 다운로드하여 적용하면 된다. 늘 그랬듯이 expo install로 간단하게 진행할 수 있다. 아래의 명령어를 터미널에 입력하면 된다. expo install expo-linear-gradient 모듈 설치를 완료한 뒤, 모듈을 import 하면 된다. 다음은 Loading Screen 코드이다. import { LinearGradient } from 'expo-linear-gradient'; import React from 'react'; import {..

Requirements 우선적으로, node.js를 설치해야 한다. nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org ver10.0 이상이면 된다. npm은 ver6 이상이면 된다. 코드 편집기는 VS Code로 진행할 예정이다. window개발 환경에서 iphone어플을 개발하기는 쉽지 않다. 테스트 또한 그렇다. 하지만 expo를 이용하면 window환경에서도 iphone으로 테스트하며 개발을 할 수 있다. 만약 안드로이드 app 개발을 원하는 경우에는 안드로이드 스튜디오 AVD를 이용할 수 있지만 실제 핸드폰에 어떻게 보이는지 확인하면 더욱 쉽게 개발할 수 있..

React Native State react native ver16.8 이전의 버전에서는 state를 사용하려면 class형 Component를 사용해야 했다. 즉, 함수형 Component에서는 state를 사용할 수 없었다. state는 해당 Component가 가지고 관리하는 값들이기 때문에 객체 형태의 class형 Component에서만 사용하도록 통제되어 있었다. 하지만, ver16.8 이상에서는 함수형 Compnent에서도 state를 사용할 수 있게 되었다. 이를 Hooks라고 한다. Hooks 사용법 import React, {useState} from 'react'; import {Text, TouchableOpacity, View} from 'react-native'; function ..

React Native Navigation application은 여러 개의 화면을 가지며, 화면 이동과 상호작용으로 동작한다. 그렇다면 react native에서는 어떤 식으로 화면 이동을 하는가?? 정답은 navigation을 이용하는 것이다. Navigation이란? 화면이동을 관리하는 것이라 생각하면 된다. 필요한 화면들을 정의하고 액션이나 이벤트에 반응하여 원하는 화면을 출력해주는 기능을 한다. 그중, stack navigation 은 화면을 stack과 비슷하게 관리하는 것이다. stack은 LIFO의 자료구조이다. 즉 마지막에 들어온 것이 가장 먼저 나가는 원리이다. 화면들을 한층 한층 쌓아 올리고 위 층부터 빠져나간다고 생각하면 된다. React Native Stack Navigation ..

Props란? props는 변하지 않는 데이터이다. props의 데이터 흐름은 상위 Component에서 하위 Component로 이동한다고 볼 수 있다. 아래 코드를 예시로 보자. import React, { Component } from 'react'; import {View, Text} from 'react-native'; class PropsText extends Component { constructor(props){ super(props); } render(){ return({this.props.text}); } } const App = () => { return ( ); }; export default App; PropsText라는 임의의 class를 만들었다. 전달받은 props를 에 적용..