3장 컴포넌트

3.2 컴포넌트

• 컴포넌트component: 재사용할 수 있는 조립 블록으로 화면에 나타나는 UI 요소
• App.js 파일도 App이라는 컴포넌트이다
• 컴포넌트는 단순히 UI 역할만 하는 것이 아니라 부모로부터 받은 속성이나 자신의 상태에 따라 표현이 달라지고 다양한 기능을 수행한다
• 리액트 네이티브는 데이터와 UI 요소의 집합체라고 할 수 있는 컴포넌트를 이용하여 화면을 구성한다

내장 컴포넌트core components

• 리액트 네이티브 컴포넌트 자세히 보기 (공식 사이트에서 읽어보는 거 추천! 많은 컴포넌트를 제공하고 있다)
• 이전 장에서 생성한 react-native-component 프로젝트의 App 컴포넌트에 있는 View 컴포넌트와 Text 컴포넌트는 대표적인 내장 컴포넌트
• 이번 장에서는 Button 컴포넌트를 사용해 실습해보겠다 문서 보기

Button 컴포넌트

• 속성
  • title: 버튼 내부에 출력되는 텍스트
  • onPress: 버튼이 눌렸을 때 호출되는 함수 지정
  • color: color 속성은 안드로이드에서 버튼의 바탕색을 나타내는 값이지만, iOS에서는 버튼의 텍스트 색을 나타내는 값이다
    • 이렇게 플랫폼마다 다른 속성값을 가질 수 있으므로 iOS와 안드로이드 모두 확인하면서 개발하는 습관을 들이는 것이 중요하다!!

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { Button, StyleSheet, Text, View } from 'react-native';

export default function App() {
  const name = 'Gummy';
  return (
    <View
     style={{
       flex:1,
       backgroundColor: '#fff',
       alignItems: 'center',
       justifyContent: 'center',
     }}
    >
      <Text style={{fontSize:30, marginBottom:10}}>Button Component</Text>
      <Button title="Button" onPress={() => alert('Click!!!')}/>
    </View>
  );
}

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

커스텀 컴포넌트 만들기

• 이번에는 리액트 네이티브에서 제공하는 컴포넌트들을 이용하여 커스텀 컴포넌트custom component를 만들어보겠다
• 위에서 Button 컴포넌트는 iOS와 안드로이드에서 다르게 렌더링되었는데, Button 컴포넌트를 대체할 MyButton 컴포넌트를 만들어보겠다
• 제작된 컴포넌트를 관리할 components 폴더를 src 폴더 밑에 만든다
• src/components/MyButton.js 파일을 생성한다

src/App.js

// 커스텀 컴포넌트 MyButton 컴포넌트를 사용해보겠다
import React from 'react';
import { Text, View } from 'react-native';
import MyButton from './components/MyButton';

const App = () => {
  const name = 'Gummy';
  return (
    <View
     style={{
       flex:1,
       backgroundColor: '#fff',
       alignItems: 'center',
       justifyContent: 'center',
     }}
    >
      <Text 
       style={{
           fontSize:30, marginBottom:10,
           }}
        >
        My Button Component
        </Text>
      <MyButton />
    </View>
  );
}

export default App;

src/components/MyButton.js

import React from "react"; // 리액트 호출
import { TouchableOpacity, Text } from "react-native"; // 리액트 네이티브에서 제공하는 컴포넌트 추가

const MyButton = () => {
    return (
        <TouchableOpacity
            style={{ 
            backgroundColor: '#3498db',
            padding: 16,
            margin: 10,
            borderRadius: 8,
            }}
            onPress={() => alert('Click!!!')}
        >
            <Text style={{ color: 'white', fontSize: 24}}>My Button</Text>
        </TouchableOpacity>
    );
};

export default MyButton;

App.js

import App from './src/App';

export default App;

실행 결과(오예!)