바르고 뜨겁게

setInterval 사용시 func.apply is not a function 에러자바스크립트에서는 함수 호출 자리에 함수의 이름이 아니라 함수명() 처럼 코딩시 정의된 함수가 즉시 호출되어 버린다.따라서 아래와 같이 코딩하면 func.apply is not a function 에러를 만나게 된다. 잘못된 사용법_myFunc = () => { ... } ​ this._timerId = setInterval(this.myFunc(),1000);코드 실행시 즉시 1번 호출이 되고, 10초 뒤엔 func.apply is not a function 에러를 만나게 된다.의도는 myFunc() 함수를 10초마다 호출하여 실행하는 것이지만, 해결 방법_myFunc = () => { ... } ​ this._time..

* navigation을 이용한 전달Req.jsnavigation.navigate("Res", { REQ_NO: "112233", REQ_DATA: "abcd" });Res.js const { navigation } = this.props; const REQ_NO = navigation.getParam("REQ_NO"); const REQ_DATA = navigation.getParam("REQ_DATA");

React native 에서 그림자 적용시안드로이드의 경우 elevation 값에 따른 그림자 변경만 허용하므로,아이폰과 안드로이드 두 플랫폼의 스타일을 각각 적용해야 한다. ...Platform.select({ ios: { shadowColor: "rgb(50, 50, 50)", shadowOpacity: 0.5, shadowRadius: 5, shadowOffset: { height: -1, width: 0 } }, android: { elevation: 5 } })

ReactNative - 컴포넌트란?UI를 독립적이고 재사용 가능하도록 나눈 조각 함수형 컴포넌트클래스형 컴포넌트보다 상대적으로 가벼워 첫 마운팅 속도가 빠름, function fnComponents(props){ return ( Hello {props} ); } 클래스형 컴포넌트컴포넌트 생명주기 메서드를 사용하거나 state를 사용할경우 반드시 class를 사용하여 컴포넌트를 만들어야 함. const classComponents = () => { return( Hello {props} ); } 사용방법파스칼 표기법 사용 : 컴포넌트 이름의 첫글자는 반드시 영문 대문자를 사용해야된다. (DOM 태그와 구분)단 하나의 root 엘리먼트를 return 해야한다.props란? : 부모 컴포넌트에서 자식 컴포넌..

ReactNative - 슬라이드 배너 설치 yarn add react-native-swiper-사용 import Swiper from "react-native-swiper"; ​

ReactNative - 화면이동 버튼 TouchableOpacityTouchableOpacity을 사용해서 버튼을 만들고, 클릭시 Detail로 이동시킨다. Movies.js import React from "react"; import { Text, TouchableOpacity } from "react-native"; ​ // 모든 화면은 navigation Prop를 가지고 있다. // navigate 이동시 경로를 적지 않아도 자동으로 찾아준다 // (App.js에서 선언된 MainNavigation에 있음) export default ({ navigation }) => Movies navigation.navigate('Detail')}> Go to detail -navigation/MainNav..

ReactNative - Tab Navigation App.js export default class App extends React.Component { ​ render() { } }-navigation/TabNavigation.js import React from "react"; import { Platform } from "react-native"; import { createBottomTabNavigator, createAppContainer } from "react-navigation"; import MoviesScreen from "../screens/Movies"; import TVScreen from "../screens/TV"; import SearchScreen from "../scre..

props 는 부모 컴포넌트가 자식 컴포넌트에게 주는 값입니다. 자식 컴포넌트에서는 props 를 받아오기만하고, 받아온 props 를 직접 수정 할 수 는 없습니다.state는 컴포넌트 내부에서 선언하며 내부에서 값을 변경 할 수 있습니다. React Js - Container Presenter Pattern리엑트 컴포넌트 코딩 패턴index.js 에서 Container.js Import Container.jsprop, state 를 통해 받은 데이터를 Presenter.js로 리턴한다.Presenter.js 넘겨 받은 데이터를 출력 한다폴더 구조 사용Home/index.js import HomeContainer from "./HomeContainer"; ​ export default HomeConta..

React Js - Rest API 사용 (Axios)baseURL, headers, timeout 등의 구성 정보를 저장해놓고 사용할 수 있다 설치 yarn add axios사용 import axios from "axios"; ​ const api = axios.create({ baseURL: 'https://api.themoviedb.org/3/', params:{ "api_key": "a4ebc08ace962cf8fe0ad4045337382d", "language": "en-US", } }); ​ // '/' 빼고 넣어야됨, '/' 입력시 절대경로로 인식해서 baseURL에 덮어씌워짐 api.get("tv/popular"); ​ export default api; 출처 : https://academ..

React Js - [SC] 동적인 UI 처리하기 props, withRouter props태그 내에 변수를 넣고 styled에서 받아서 동적인 처리가 가능하다Item이란 태그 내에 current라는 변수를 넣고 styled에서 받아서 동적으로 처리하고 있다. withRouter다른 컴포넌트를 감싸는 컴포넌트로 Router에 정보 전달이 가능하다url path 정보 등 유용한 정보들을 얻을 수 있다. export default withRouter( props => ( {console.log(props)} ) ); import import { Link, withRouter } from "react-router-dom"; 사용{ location: { pathname } } : props 파라미터에서 path..