Views, Text & Styles

1. 개요

리엑트 네이티브 를 작업하기 위해서는 3가지 기본적인 위젯 을 알아야 한다.

• View
• Text
• StyleSheet

이제부터 하나씩 살펴 보자.

2. Setting

2.1. Import

우선 다음과 같은 위젯 들을 사용하기 위해서는 작업하기 위한 파일에 불러와야한다. 기본적으로 위의 3개의 위젯들은 기본적으로 import 가 되어 있을것이다.

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

일반적인 React 에서는 React에서 불러오는 React 컴포넌트 밖에 존재하지 않지만, React-native 에서 불러오는 StyleSheet, Text, View 에 주목을 하자. React-native는 필요한 위젯들을 그때그때 불러오는 형식으로 되어있기 때문에 React-native문서를 항상 참고하면서 자신에게 어떤 위젯이 필요한지 확인하며 작업하는 것을 추천한다.

3. widget

3.1. View

View 는 간단하게 설명하면 html의 div 태그와 같은 역할을 한다. 무엇인가를 담을 수 있는 그릇이라고 보면 더 편하다. 사용방법 또한 div태그와 유사하기때문에 그리 어려울 것이 없다.

3.2. Text

Text 는 글을 담기위한 그릇으로 html의 h1~h6, p 태그 정도라고 보면된다. 하지만 html과 다른점은, html은 h1~h6, p 태그에 담지 않고 그냥 글을 적어도 반영이 되는 반면, React-native에서는 글을 쓰고자 하는 경우 반드시 Text위젯에 속에 적어야 한다는 점이다.

3.3 StyleSheet

StyleSheet 는 위젯 처럼 쓰지 않고 javascript object 처럼 사용한다. 객체를 생성하여 안에 CSS 와 같이 디자인 속성들을 입력하고, 다른 위젯들에 적용을 시켜주면 된다. 단, 주의 할점은 css는 - 를 사용하여 속성이름을 작성하는 반면 javascript내에서는 대문자로 구분하여 준다.

다음과 같이 오브젝트 생성 후, 다른 위젯들의 style 속성에 직접 적용 시켜주면 된다.

4. Result