[React Native] 2. 기본 컴포넌트

Hello, World!

App.js 파일을 열고 아래 코드를 작성해 본다

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

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello, World!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f5f5f5',
  },
  text: {
    fontSize: 24,
    color: '#333',
  },
});

 

 

코드 설명

레이아웃 구조

import React from 'react';
import { Text, View, StyleSheet } from 'react-native'; // React Native 컴포넌트 및 StyleSheet 모듈 가져오기

export default function App() {
  return (
    <View style={styles.container}> {/* View: 화면 레이아웃의 컨테이너 */}
      <Text style={styles.text}>Hello, World!</Text> {/* Text: 텍스트 표시 */}
    </View>
  );
}

• View : HTML의 <div>처럼 사용되는 기본 레이아웃 컴포넌트
• Text : 텍스트를 표시하는 컴포넌트. HTML의 <p> 또는 <span> 역할

 

스타일 적용

const styles = StyleSheet.create({
  container: {
    flex: 1, // 전체 화면을 채움
    justifyContent: 'center', // 세로축 중앙 정렬
    alignItems: 'center', // 가로축 중앙 정렬
    backgroundColor: '#f5f5f5', // 배경색 지정
  },
  text: {
    fontSize: 24, // 폰트 크기
    color: '#333', // 텍스트 색상
  },
});

• StyleSheet : CSS 스타일을 JavaScript 형태로 정의하기 위한 객체
• StyleSheet.create를 사용하면 스타일이 최적화되며, 네이티브 코드에서 효율적으로 렌더링된다.

기능	React (웹)	React Native
컨테이너	<div>	<View>
텍스트	<p>, <span>	<Text>
스타일링 방식	CSS, SCSS	StyleSheet
레이아웃 시스템	CSS Grid, Flexbox	Flexbox

 

 

 

추가적인 기본 컴포넌트

 

코드예제

import React, { useState } from 'react';
import {
  View,
  Text,
  TextInput,
  Button,
  StyleSheet,
  ScrollView,
  TouchableOpacity,
} from 'react-native';

export default function App() {
  const [text, setText] = useState('');
  const [items, setItems] = useState([]);

  const addItem = () => {
    if (text) {
      setItems([...items, text]);
      setText('');
    }
  };

  return (
    <ScrollView contentContainerStyle={styles.container}>
      <Text style={styles.title}>React Native To-Do List</Text>
      <TextInput
        style={styles.input}
        placeholder="Enter a task"
        value={text}
        onChangeText={setText}
      />
      <Button title="Add Task" onPress={addItem} />
      {items.map((item, index) => (
        <TouchableOpacity key={index} style={styles.item}>
          <Text>{item}</Text>
        </TouchableOpacity>
      ))}
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flexGrow: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
    backgroundColor: '#f5f5f5',
  },
  title: {
    fontSize: 24,
    marginBottom: 20,
  },
  input: {
    width: '100%',
    padding: 10,
    borderWidth: 1,
    borderColor: '#ccc',
    marginBottom: 10,
  },
  item: {
    padding: 15,
    marginVertical: 5,
    backgroundColor: '#eee',
    borderRadius: 5,
    width: '100%',
    alignItems: 'center',
  },
});

 

 

• ScrollView: 스크롤 가능한 컨테이너. 많은 데이터를 표시할 때 유용하다.
• TextInput: 사용자의 입력을 받을 수 있는 필드.
• Button: 간단한 클릭 이벤트를 처리하는 버튼.
• TouchableOpacity: 클릭 가능한 영역을 만들고, 클릭 시 시각적 피드백을 제공.
• useState: React의 상태 관리 훅(Hook)으로, 데이터를 동적으로 변경.