천천히 차근차근

리엑트 네이티브 프로젝트 생성 $ npx react-native init projectName npx란? Node.js와 함께 설치되는 도구로, Node.js 환경에서 구동되는 CLI 도구들을 간단하게 사용할 수 있게 해준다. package.json package.json 파일을 열어보면 위와 같이 scripts가 설정된 것을 확인할 수 있다. 이렇게 스크립트가 설정되면 yarn을 통해 아래와 같이 원하는 명령어를 실행할 수 있다. $ yarn 스트립트 종류 android : 안드로이드 환경에서 앱을 구동하는 스크립트 ios : iOS환경에서 앱을 구동하는 스크립트 start : Metro를 구동하는 스크립트 Metro란? 리액트 네이티브를 위한 자바스크립트 번들러로, 프로젝트에 사용된 자바스크립트 파일..

babel에 있는 라이브러리를 모두 yarn으로 추가해준다. babel.config.js 입력 사항 module.exports = { presets: ['module:metro-react-native-babel-preset'], plugins: [ ['@babel/plugin-transform-flow-strip-types'], [ "@babel/plugin-proposal-decorators", { "legacy": true } ], [ "@babel/plugin-proposal-class-properties", { "loose": true } ] ] };metro.config.js /** * Metro configuration for React Native * https:..

아래와 같이 실행을 하니, this.setState는 함수가 아니다?? 정의되지 않았다?? 라는 오류 발생. Test () { //this.state.data.is_refresh = true; this.setState({is_refresh: true}); ~~~~~ } 해결 방법 아래와 같이 작성을 하니 실행됨. 함수를 시작하는 뜻일까... AsyncFavoriteList = () => { this.state.data.is_refresh = true; ~~~~~~ }

css를 만지다 보면 최대 너비로 하고싶을때 이상하게 width:100%가 안될때가 있다 난 초보라 왜그런지모른다 이럴땐 width를 screen 너비로 해주면 참 좋은데 알아보자 reactnative의 기본 api이다 import해주자 import {Dimensions} from 'react-native'; 상단에 아무때나 변수를 초기화 해주자 Dimensions.get('window'). 를 이용하면 된다. const Width = Dimensions.get('window').width; //스크린 너비 초기화 const Height = Dimensions.get('window').height; //스크린 높이 초기화 예시: 예를들어 이런 버튼이 있다 양쪽으로 꽉 차게 하고싶다.

iOS / 안드로이드 default로 제공되는 각 플렛폼의 native 속성이 다르다. react-native는 data flow가 무조건 부모에서 자식이다. 자식이 가지고 있는 값을 자식이 부모한테 보내줄 수 없다. 자식인 input.tsx를 App.tsx에서 import 받아 쓴다. 자식의 데이터를 부모가 사용할 방법이 없는 것이다. 그래서 필요한 자료들을 복사해서 App.tsx에서 사용하는 것이다.

enum enum은 export만 할 수 있다. (export default를 할 수 없음) export한 것은 import를 할 때 중괄호로 감싸주어야 한다.

TextInput self closing property value : 입력받는 값 onChangeText : 텍스트를 입력받을 때마다 발생하는 이벤트를 발생시키는 multiline : true, false 문자 길이가 길어지면 아래로 개행해주는 maxLength : 글자수의 제한 autoCapitalize editable : 편집 가능 여부 (readOnly 같은걸 선택하는)

import React, {Component} from 'react'; import {View, Text, Alert, StyleSheet} from 'react-native'; import Header from './src/header'; import Generator from './src/generator'; import NumList from './src/numList'; class App extends Component { state = { appName: 'My First App', random: [23, 11] } onAddRandomNum = () => { const randomNum = Math.floor..

import React, {Component} from 'react'; import {View, Text, Alert, StyleSheet} from 'react-native'; import Header from './src/header'; import Generator from './src/generator'; import NumList from './src/numList'; class App extends Component { state = { appName: 'My First App', random: [23, 11] } onAddRandomNum = () => { const randomNum = Math.floor..

Button /> 의미 : 셀프 클로징(self closing) Button tag에는 title이라는 property가 필수로 들어가야 한다. Button Tip Android, iOS Button default 값이 다르다. import React from 'react'; import { Text, View, StyleSheet, Button } from 'react-native'; const Generator = (props:any) => { return ( props.add()} /> ) } const styles = StyleSheet.create({ generator: { width: '100%', backgroundColor: '#fafafa..

exampleFunction = () => { } exampleFunction = () => ( ) 괄호의 차이 중괄호( {} ) : return되는 JSX Component가 없는 것. 소괄호( () ) : JSX를 return 할 수 있다. 소괄호 끝에 빨간줄이 보이는 것은 return해야 하는데 return 값이 없어서 빨간 라인이 보이는 것이다. JSX JavaScriptXML의 약자 javascript의 확장 문법 TouchableWithoutFeedback Props TouchableOpacity와 똑같은데 투명해지지 않는 것. View에 아무런 변화를 일으키지 않는다. TouchableWithoutFeedback을 사용하는 경우, view에는 아무런 영향을 주지 않기 때문에 style을 입힐..

src 폴더를 생성하고 그 안에 header.tsx를 만든다. header로 사용할 함수를 만들어서 export 한다. App.tsx에서는 Header를 import 한다. header에서 사용할 내용을 import한 Header태그를 이용하여 값을 넘긴다. Header에서는 props로 값을 받아 사용한다.

View, Text import React, { Component } from 'react'; react라는 module에서 Component class를 import하는 의미. 그 Component를 상속받는 App이라는 클래스를 생성하는 순서 App 클래스 화면을 렌더링하는 함수가 있고(render() 함수) 그 안에 return 되는 것들이 화면을 구성하게 된다. import { View, Text } from 'react-native'; 'react-native'라는 module에서 View, Text 클래스를 import하는 것이다. Button, Image 등 다양한 클래스를 가져와서 사용할 수 있다. Text, Button, Image 등 화면에 출..

비동기성 setState 메소느는 비동기로 state를 업데이트 한다. state는 조심해서 다뤄야 한다. setState를 통해 값 변경할 때, 현재 버전을 카피한 다음에 업데이트를 하게 된다. onAdd = () => { this.setState(prevState => { return { sampleNum: prevState.sampleNum + 1 } }) } prevState(callback)를 사용해서 state를 변경한 다음에 실행되도록 한다.

State Component에서 rendering되는 데이터를 담고 유지, 관리하는 자바스크립트 객체이다. component의 rendering되는 데이터를 다루기 때문에 매우 중요하다. state 값에 따라 화면에 보여지는 output이 달라질 것이다. class component안에서 사용이 가능하고, 함수 컴포넌트를 정의했다면 state의 활용은 불가하다. state 활용 불가 예시 const App = () => { return ( ) } state 시작 우리는 App이라는 클래스를 사용할 것이기 때문에 state를 사용할 수 있다. state는 render함수 밖에서 정의가 된다. Hello World라는 문자를 직접 입력하는 것과 변수에 값을 할당해서 출력하는 것은 굉장한 차이가 있다. 결과는..

앱의 출력화면은 App.js에서 만들어진다. react라는 모듈에서 Component라는 클래스를 import는 해옴. Component라는 클래스는 App 클래스가 상속 받았다. Component 클래스 안에는 화면을 출력하는 render()라는 함수가 존재한다. 이 함수가 return하는 것들이 화면을 구성한다. import React, {Component} from 'react'; import {View, Text, StyleSheet} from 'react-native'; class App extends Component { render() { return ( Hello World!!!! ); } } const styles = StyleSheet.create({ bac..

React란?? UI를 개발하기 위한 자바스크립트 라이브러리이다. (UI : User Interface) 화면에 보여지는 웹, 앱 그림, 버튼, 텍스트 등 화면을 구성하는 뷰를 만들어주는 facebook에서 관리하고 개발하고 있다. 프로젝트 생성 react-native init react_01 (react-native init --version 0.61.5 react_01) version을 명시해서 프로젝트를 생성하려고하니 오류 발생 react-native run-android

Arrow Function 표현식의 결과값을 반환하는 표현식 본문에 쓰인다. 상태 블럭 본문에 쓰인다. map의 두번째 인자로는 index를 파라미터로 받는다. //arrow function let arr = [1, 2, 3, 4, 5]; // map : for문 같은 loop, 자바스크립트에서 지원하는 배열 객체 내장 함수. // input이 파라미터로 전달되는 함수이고, outPut이 새로운 배열이다. let twice = arr.map(v=>v*2); /* 위와 같은 표현식 let twice = arr.map(function(val) { return val * 2; }); */ console.log(twice); // 상태블록 본문에 쓰인 예제 let arr2 = [1, 2, 3, 4, 5, 6];..