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 = <tag>hello world</tag>
// jsx component를 리턴하므로 {} x () o 
// jsx 리턴하는게 없다면 {} 쓰면 된다.
const Header = () => (
    <View style={styles.header}>
        <Text>this is header</Text>
    </View>
)

const styles = StyleSheet.create({
  header: {
      backgroundColor: 'pink',
      alignItems: 'center',
      padding: 5,
      width: '100%'
  }
})

export default Header;

ㄴ이번에 배웠던 것은 jsx의 반환유무에 따라 {} () 가 갈리는 것을 배웠다. jsx를 리턴할 경우 소괄호를 사용해준다.

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React,{Component} from 'react';
import { View,Text, StyleSheet } from 'react-native';
import Header from './src/header';

class App extends Component{
  render(){
    return (
      <View style={styles.mainView}>
        <Header/>
        <View style={styles.subView}>
          <Text style={styles.mainText}>hello world</Text>
        </View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  mainView: {
    flex: 1,
    paddingTop: 50,
    alignItems: 'center',
    justifyContent: 'center'
  },
  subView: {
    backgroundColor: 'yellow',
    marginBottom: 10
  },
  anotherView: {
    flex: 2,
    backgroundColor: 'yellow',
    marginBottom: 10 ,
    width: '100%',
    alignItems: 'center',
    justifyContent: 'center'
  },
  mainText:{
    fontSize: 20,
    fontWeight: 'normal',
    color: 'red',
    padding: 20
  }
})

export default App;

ㄴimport 부분에서 임포트 시켜주고, 사용하고 싶은 곳에 태그를 붙이면 된다.

큰 도화지에 헤더 태그가 잘 들어갔다.

끝.