본문 바로가기

Dev/RN10

6. [RN] state, props를 이용해 데이터 전달하기 이번 포스팅에서는 state, props를 이용해 데이터를 전송하는 것만 배워보도록 하겠습니다. 이전 포스팅의 자료를 활용할 것입니다. class App extends Component{ state = { appName: 'My first app' } render(){ return ( hello world ) } } state를 생성해준 다음에 변수 이름을 지정해 줍니다. 헤더에 name이라는 속성을 지정하여 해당 변수를 내려줍니다. /** * Sample React Native App * https://github.com/facebook/react-native * * @format * @flow */ import React from 'react'; import { View,Text, StyleSheet.. 2021. 1. 28.
5. [RN] 조각 붙이기 이번 포스팅에서는 조각을 붙이는 방법을 배우려고 한다. 앱은 조각들을 큰 도화지에다 붙이는 과정이라고 생각하면 된다. 간단하게 header 를 만들어서 도화지에 붙여보려 한다. 저번 포스팅의 코드를 그대로 가져와서 덧붙일 것이다. /** * Sample React Native App * https://github.com/facebook/react-native * * @format * @flow */ import React from 'react'; import { View,Text, StyleSheet } from 'react-native'; // jsx : javaScript xml // const example = hello world // jsx component를 리턴하므로 {} x () o // .. 2021. 1. 27.
4. [RN] 스타일 꾸미기 이번 포스팅에서는 스타일을 꾸며보도록 하겠습니다. 저번 포스팅에서 hello world를 띄우기 완료했다면, 그 소스를 그대로 가지고와서 style 설정을 진행해줍니다. 코드는 web이랑 크게 다른 것 같지 않습니다,. /** * Sample React Native App * https://github.com/facebook/react-native * * @format * @flow */ import React,{Component} from 'react'; import { View,Text, StyleSheet } from 'react-native'; class App extends Component{ render(){ return ( hello world hello world hello world ) .. 2021. 1. 26.
3. [RN] Hello world! 띄우기 맥북도 옛날 버전이라 한번 키는 것도 오래 걸리는 듯 하다... ios 하나 띄우는데 베터리 10퍼 잡아먹는다니.. 오늘은 hello world 띄워보려고 한다. App.js 를 만지는 것으로 설정은 끝이 난다. /** * Sample React Native App * https://github.com/facebook/react-native * * @format * @flow */ import React,{Component} from 'react'; import { View,Text } from 'react-native'; class App extends Component{ render(){ return ( hello world ) } } export default App; import React,{Co.. 2021. 1. 25.