SallyJ

Props (React native)

Props는 부모Class가 가지고 있는 데이터를 자식Class에게 전달해주기 위한 수단으로, 부모의 데이터를 받은 자식Class의 Component 내에서 수정/변경이 불가하고 그대로 쓰이게되는 읽기전용 프로퍼티다. 사용법은 간단하다. 먼저 부모 Class에서는 자식Class를 import 해주고, render() 안에서 부모 Class의 어떤 데이터를 넘겨줄것인지만 적으면 된다. // 부모 클래스 import React, { Component } from 'react'; import {View, Text, StyleSheet} from 'react-native'; import PropsChild from './propsChild'; class App extends Component { state = ..

State (React native)

state 는 component 에서 렌더링 되는 데이터를 담고 유지/관리하는 자바스크립트 객체인데, state 값에 따라 화면에 보여지는 output이 달라진다. class component 안에서 사용 가능하고, 함수 component를 정의했다면 state의 활용은 불가능하고 state는 render() 함수 바깥에서 정의가 된다. import React, { Component } from 'react'; import {View, Text, StyleSheet} from 'react-native'; class App extends Component { state = { sampleText: 'Hello world~!!', sampleBoolean: false, sampleNum: 1 } inputT..

class (react native)

class... 처음엔 java에서 내가 쓰던 클래스라고 생각했다... 공부하면 할수록 읭??? 싶어서 찾아봤다. java script에서 class는 함수처럼 쓰인다고? 아... 벌써부터 헷갈린다....젠장 class Person { constructor (gender, age) { this.gender = gender; this.age = age; } nationality(value = 'korea') { console.log(value) } } let korean = new Person('femail', 23) console.log(korean) // {gender: 'femail', age: 23} korean.age = 46 console.log(korean) // Person {gender: ..

Arrow function (react native)

Arrow function은 => 이 기호를 쓰는 축약형 함수다. Arrow function을 안 쓴다면 코드를 아래 예제처럼 이렇게 길게 늘어뜨려 써야겠지만, let arr = [1,2,3,4,5]; let public = arr.map(function(val) { return val*2 }) console.log(public) // [2, 4, 6, 8, 10] Arrow function을 쓴다면 => 이 기호 하나로 코드가 간편해진다. let arr = [1,2,3,4,5]; let arrow = arr.map(v=>v*2); console.log(arrow) // [2, 4, 6, 8, 10] 깔끔하기까지하니 얼마나 좋은가!! 다른 예제를 더 보자 let arr = [1,2,3,4,5]; let ..

rest operator, spread operator (react native)

rest operator rest operator는 함수의 마지막 파라메터 앞에 들어가는 ... ←이것이다. 모든 나머지 인자를 표준 자바스크립트 배열로 대체하기 위한 문법이다. // Rest Operator function printNum(num1, num2) { console.log(num1, num2); // 1 2 console.log(arguments); // 1,2,3,4,5 } function printNums(num1, ...num2) { console.log(num1, num2); // 1 [2, 3, 4, 5] } printNums(1, 2, 3, 4, 5); Spread Operator spread Operator는 함수를 호출할때 인수로 사용할 수도 있고, 배열안에 들어갈수도 있고,..

for ... in, for ... of 반복문 사용방법(react native)

// for ... in let array = [ 10, 20, 30, 40 ] let obj = { a: 1, b: 2, c: 3 } for (let val in array) { console.log(array[val])// 10 20 30 40 } for (let val in obj) { console.log(val) // a b c (key 값 얻을 때 사용) console.log(obj[val]) // 1 2 3 (value 값 얻을 때 사용) } // for ... of 자동으로 index가 설정되는 배열에만 사용가능 for (let val of array) { console.log(val)// 10 20 30 40 }

String literal(react native)

String literal 은 문자열과 변수를 편하게 다룰 수 있게 해주는 문법이다. // String literal const str1 = 'Hello'; const str2 = 'World'; const result = str1 + ' '+ str2 + '!!!'; console.log(result);// Hello World!!! // `${variable}` const litStr = `${str1} ${str2}!!!`// 키보드 숫자 1옆에 있는 기호 ~밑 작은 따옴표 console.log(litStr);// Hello World!!! 첫번째 방법과 두번째 방법 모두 같은 결과값이 나온다. 하지만 난 왠지 첫번째 방법이 편해서 첫번째 방법으로 계속 쓸 듯하다...

var let const 의 차이(react native)

var, let, const 전부다 int 값도 String 값도 다 받을 수 있다. 하지만 var 의 경우 똑같은 변수를 사용해도 에러가 뜨지 않는다. 몇백줄, 몇천줄의 코드를 작성하다보면 내가 어떤 변수를 사용했는지 기억을 못해서 같은 변수를 사용할 수도 있는데, 그때는 내가 원하지 않는 곳에 새로운 값이 입혀질 수도 있다 그래서 난 let을 사용하는 것을 권장한다. var hello = 'world'; var hello = 'react-native' console.log(hello);// 에러없이 결과값이 react-native 가 나온다 하지만 var 대신에 let을 쓰면 에러가 뜬다. 요 경우에는 글로벌변수와 로컬 변수이기 때문에 당연하게도 내가 원하는 값이 그대로 나온다 var hello = ..

React Native 실행 순서(안드로이드)

설치가 다 되어있다는 가정 하에 1. VS Code 실행 2. cmd 실행 3. cmd 화면에서 내가 프로젝트 생성할 폴더 찾아가기 4. cmd 화면에서 npx react-native init PROJECT NAME 적고 엔터 (프로젝트 생성) 5. cmd 화면에서 내 프로젝트 폴더로 들어가기 6. 디바이스를 usb로 연결해두거나, 안드로이드 시뮬레이터 켜기 7. cmd 화면에서 npx react-native run-android 적고 엔터 8. VS Code 에서 파일>작업영역에 폴더추가>방금만든 프로젝트 열어주기 9. App.js 에서 코드 수정하고 저장하면 디바이스/에뮬레이터에서 실시간 확인 가능 * 안드로이드 디바이스를 컴퓨터와 분리시켰다가 다시 연결했을 경우 1. https://reactnati..