[React Native] 2장 컴포넌트 구조 이해

1. 기본 프로젝트 구조

프로젝트를 생성하면 기본 폴더 구조는 다음과 같습니다.

MyExpoApp/
├── assets/
├── node_modules/
├── App.js
├── app.json
└── package.json

---

2. 기본 컴포넌트

• View

react-native를 제일 먼저 실행하면 보이는 곳은 app -> (tabs) -> index.tsx 부분입니다 이곳은 다음과 같이 수정합니다.

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

const App = () => {
  return <View style={styles.container}></View>;
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#ecf0f1",
  },
});

export default App;

• Text 

Text는 텍스트를 표시하는 컴포넌트입니다.

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

const App = () => {
  return (
    <View style={styles.container}>
      <Text>Hello, ReactNative</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#ecf0f1",
  },
});

export default App;

• TextInput

TextInput은 사용자로부터 텍스트 입력을 받을 수 있는 컴포넌트입니다.

import React, { useState } from "react";
import { View, StyleSheet, Text, TextInput } from "react-native";

const App = () => {
  const [text, setText] = useState("");

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        onChangeText={setText}
        value={text}
        placeholder="Type here..."
      />
      <Text>Hello, ReactNative</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#ecf0f1",
  },

  input: {
    height: 40,
    borderColor: "gray",
    borderWidth: 1,
    width: "80%",
    padding: 10,
  },
});

export default App;

• Button

버튼은 사용자와 상호작용 할 수 있는 버튼 컴포넌트입니다.

import React, { useState } from "react";
import { View, StyleSheet, Text, TextInput, Alert, Button } from "react-native";

const App = () => {
  const [text, setText] = useState("");
  const showAlert = () => {
    Alert.alert("Button Clicked!", "You clicked the Button.");
  };

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        onChangeText={setText}
        value={text}
        placeholder="Type here..."
      />
      <Text>Hello, ReactNative</Text>
      <Button title="PressMe" onPress={showAlert} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#ecf0f1",
  },

  input: {
    height: 40,
    borderColor: "gray",
    borderWidth: 1,
    width: "80%",
    padding: 10,
    marginBottom: 10,
  },
});

export default App;

---

3. 요약

• 컴포넌트: React Native의 기본 단위로, UI의 재사용성이 가능한 부분
• Props: 컴포넌트에 전달되는 데이터로, 부모 컴포넌트에서 자식 컴포넌트로 전달
• State: 컴포넌트의 내부 상태로, 컴포넌트가 변경될 때마다 UI를 업데이트하는 데 사용

---

 

GitHub - Koras02/react-native-bloging: https://thinky.tistory.com/category/Mobile/React%20Native