리액트 네이티브로 앱 개발을 할 때 알아둬야하는 리액트 기초지식에 대해서 공부해보겠습니다. 리액트의 간단한 과정을 살펴보자면, (컴포넌트 / 상태 / 속성) ** 컴포넌트에 Props(속성) 가 데이터를 전달해주면 컴포넌트 안에 있는 State(상태)가 그 데이터를 관리하게됩니다. 1. 컴포넌트 : 정해진 태그들을 사용하여 화면의 일부분들을 만드는 것을 말합니다. ex) 페이지를 여러 개로 나눠서 작성하고 관리한 것조차 컴포넌트라고 할 수 있습니다. ex) 버튼, 이미지, 전체화면조차 가능합니다. ex) 크게는 "코드를 분할해서 관리했다"를 의미합니다. 2. State (상태) : 컴포넌트 안에서 데이터를 관리하는 방법 : 하나의 파일, 페이지 등과 같은 의미입니다. >> 리액트에서는 상태가 바뀌어야 화..
'리액트 네이티브' 앱 개발에 필요한 자바스크립트의 문법에 대해서 배워보고자 합니다. - export를 function 앞에다가 달면 참조할 수 있습니다. - export 키워드는 밖에서도 쓸 수 있게 만들어주는 키워드입니다. export default function App { } // App함수를 외부에서 사용할 수 있도록 내보낼 수 있습니다. : 화면을 그리는 함수말고도 데이터를 다룰 때도 유용하게 사용됩니다. : 딕셔너리 + 리스트 복합구조(JSON 데이터 형식)로 구성됩니다. : 모듈시스템의 사용 예로, 폴더 안에 이 data.json을 넣고, 반복문을 통해서 APP.js 에서 뿌려줄 수 있습니다. >> App.js 에서 import data from './data.json' cf) 같은 폴더 ..
'리액트 네이티브' 앱 개발에서 가장 중요하다고도 할 수 있는 Style 속성에 대해서 배워보고자 합니다. :태그에 이어 모든 태그에 공통적으로 있는 style 속성에 대해서 공부할 것입니다. : style 속성은 엘리먼트들 즉 태그들에 스타일을 주기위한 속성입니다. * StyleSheet 이라는 기능을 가져와서 스타일을 입힐 수 있습니다. import StyleSheet from 'react-native'; * styles 라는 변수로써 StyleSheet를 쉽게 불러올 수 있습니다. const styles = StyleSheet.create({ )} >> StyleSheet을 생성해서 styles라는 변수에 넣어놓습니다. >> const : 변하지 않는 변수값이므로 스타일 값으로 태그들을 꾸며줄 수 ..
'리액트 네이티브' 앱 개발에서 필요한 엘리먼트(태그)에 대해 공부하고자합니다. 기본적인 엘리먼트부터 유용한 엘리먼트까지 배워보고자 합니다. 1. View 태그 : 화면의 영역을 잡아주는 태그 : style코드를 입혀주지 않는 이상 화면에 표시가 되지 않습니다. 2. Text태그 : 문자를 쓸때는 항상 Text태그를 사용해주어야 합니다. : View 태그안에 문자를 쓰게되면 오류가 발생합니다. 텍스트입니다. 3. ScrollView : 앱화면을 벗어나는 경우 ScrollView 엘리먼트로 감싸면 스크롤이 가능해지면서 모든 컨텐츠를 확인할 수 있습니다. : View 태그보다 바깥에서 구성 4. Button : 버튼을 누르면 팝업이 뜨기도하고, 다른페이지로 넘어가기도 하는 등의 다양한 기능이 실행됩니다. >..
2주차부터는 '리액트 네이티브' 앱 개발을 시작하려고 합니다. 그러기 위해서는 리액트 네이티브 (기술)와 Expo (도구)를 설치하여야 합니다. 이후 앱 화면을 만들고, 리액트 기초를 공부해보겠습니다. 리액트(React) + 네이티브(Native)의 합성어로, 자바스크립트 언어 하나로 안드로이드 앱과 ios앱 두가지 모두 만들어주는 라이브러리를 말합니다. cf) 라이브러리 : 개발할 때 사용하는 도구 안드로이드 & iOS 코드를 몰라도 개발이 가능하게 해주는 도구이자, 개발중인 앱을 쉽게 확인해주는 앱을 제공하는 도구 즉 Expo는 "개발 중인 앱 테스트"를 위한 Expo 클라이언트 앱을 자바스크립트 형태로 제공해줍니다. >> Expo Client 앱을 다운받..
