View / Text

 

목차

 

React Native에 대해 적기 전에

태그에 대해 정리를 해놔야

이후 심화 내용 포스팅할 때 마음이 편할 것 같다.

이해 안 되시면 앞에서 보고 오세요~ 같은 느낌

태그 종류

React Native는 앞선 포스트에서 말했듯이,

React 언어를 모바일 코딩 언어(Native)로 변환하는 것이기에,

쓸 수 있는 태그가 다르다.

 

내가 작업하다 필요한걸 그때그때 알아내는 스타일이라

이번 글은 기본적인 태그만 올릴 것이다.

사실 이 방식을 추천한다.

아무리 완벽하게 공부해봤자

패치하는 개발도구 특성상 완벽하게 알 수 없다.

입문자가 다 알고 들어간다는 것 자체가 비효율적이기도 하고.

 

View

html에서 div와 비슷한 태그이다.

position : block속성이다.

import React from "react";
import { View } from "react-native";

const ViewBoxes = () => {
  return (
    <>
      <View
        style={{
          flexDirection: "row",
          height: 100,
          backgroundColor: "#fdbaf8"
        }}
      >
      </View>
      <View
        style={{
          flexDirection: "row",
          height: 100,
          backgroundColor: "#b0efeb"
        }}
      >
      </View>
    </>
  );
};

export default ViewBoxes;

Text

React Native 특징은

텍스트를 Text 태그 안에 넣어야 한다는 것이다.

Button은 조금 다른 방식으로 글자를 표현할 수 있기는 한데,

이 또한 글자를 표현하는 것이지 텍스트랑은 다르다.

기본적으로 텍스트를 넣을 수 있는 건 Text태그 밖에 없다.

import React from "react";
import { Text } from "react-native";

const App = () => {

  return (
      <Text>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eius velit aliquam, aut voluptate veniam debitis ad. Explicabo ab atque obcaecati error facilis animi quibusdam similique dicta, esse dolore fugit nam.
        {"\n"}
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eius velit aliquam, aut voluptate veniam debitis ad. Explicabo ab atque obcaecati error facilis animi quibusdam similique dicta, esse dolore fugit nam.
      </Text>
  );
};

export default App;

특이사항으로는 개행할 때 중괄호{}를 써준뒤 

따옴표로 텍스트라고 표시 후 개행 명령어를 써줘야 한다는 것

{"\n"} 요렇게

 

끝

음.. 버튼... 은.. 다음에 하자 onPress 설명하다 길어질 것 같다.