React-Native 섹션2

이유정·2023년 4월 12일

핵심적인 RN 내장 컴포넌트

https://reactnative.dev/docs/components-and-apis

React-Native에는 css가 없다.

Inline Styles 랑 StyleSheet Objects 를 이용한다.
즉, js에서 스타일링을 작성한다는 뜻이다.
추가적인 스타일링 언어는 없다.
그러나, js 프로퍼티를 많이 제공했다. css 프로퍼티랑 비슷함

App.js

Expo가 자동으로 App 컴포넌트를 App.js 파일에서 내보내서 루트 컴포넌트로 렌더링한다.
모든 UI요소와 컴포넌트는 App 컴포넌트 산하에 자식이나 자손이 되어야 한다.

핵심 컴포넌트

`<View>`

<div>와 같은 쓰임으로 사용된다.
일반적으로 콘텐츠를 담는 상자나 컨테이너 구축에 사용된다. (유일한 컨테이너 컴포넌트)
다른 컴포넌트를 담을 수 있지만, 텍스트를 표시할 순 없다.

`<Button>`

<Button /> 자체적으로 탭을 닫는다.
버튼 글자는 <Button title="Tap me!" /> 이렇게 써준다.

예시)

import { StyleSheet, Text, View, Button } from "react-native";

export default function App() {
  return (
    <View style={styles.container}>
      <View>
        <Text>Another piece of text!</Text>
      </View>
      <Text>Hello World!</Text>
      <Button title="Tap me!" />
    </View>
  );
}

style 프로퍼티 적용이 되는 컴포넌트

<View>
<Text>

css와 비슷하지만 완전히 똑같지는 않다.

margin은 되고, border은 없는 프로퍼티다.

  <Text style={{ margin: 40, border: "1px solid red" }}>Hello World!</Text>

border 프로퍼티에 대해서

vscode에서 border치면 이렇게 많은 프로퍼티가 나온다. 이거 이용하자!

inline styling 방식은 잘 사용하지 않는다. 보통 stylesheet 객체를 이용한다.

jsx 코드와 스타일 코드를 명확히 구분해주기 때문이다.
스타일을 재사용할 수 있기 때문이다.

stylesheet 객체 사용한 예시

import { StyleSheet, Text, View, Button } from "react-native";

export default function App() {
  return (
    <View style={styles.container}>
      <View>
        <Text style={styles.dummyText}>Another piece of text!</Text>
      </View>
      <Text style={styles.dummyText}>Hello World!</Text>
      <Button title="Tap me!" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
  dummyText: {
    margin: 40,
    borderWidth: 2,
    borderColor: "blue",
    padding: 16,
  },
});