250x250
Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
Tags
- Animation
- react
- 비전공자
- HTML
- effect
- 풀스택
- javascript
- xcode
- keyframes
- jQuery
- iPhone
- 프론트엔드
- MAC
- image
- 개발자
- php
- button
- html5
- 자바스크립트
- 비전공 개발자
- 백엔드
- CSS
- IOS
- 애니메이션
- front-end
- ipad
- iOS 개발자
- SWIFT
- css3
- hover
Archives
- Today
- Total
비전공자 개발일기
React & React Native Component 본문
728x90
SMALL
컴포넌트(Component)
- 재사용이 가능한 조립 블록, 화면에 나타나는 UI 요소
- 부모로부터 받은 속성(Props)나 자신의 상태(State)에 따라 표현이 달라지고 다양한 기능을 수행
- (내장 컴포넌트)
https://reactnative.dev/docs/components-and-apis (View, Text 등)
https://reactnative.dev/docs/button
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, Button } from 'react-native';
export default function App() {
const name = "IRONMAN";
const age = 100;
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!!!!")}}></Button>
</View>
);
}
https://reactnative.dev/docs/button#color
- (커스텀 컴포넌트)
import React from "react";
import {Text, TouchableOpacity} from 'react-native';
const MyButton = () => {
return (
<TouchableOpacity>
<Text style = {{fontSize: 24}}>My Button</Text>
</TouchableOpacity>
);
};
export default MyButton ;
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, Button } from 'react-native';
import MyButton from './src/MyButton'
export default function App() {
return (
<View
style = {{
flex: 1,
backgroundColor: '#fff',
alignItems: "center",
justifyContent: "center",
}}
>
<Text style = {{fontSize: 30, marginBottom: 10}}>My Button Component</Text>
<MyButton></MyButton>
{/* <Button title = "Button" onPress = {() => {alert("Click!!!!")}}></Button> */}
</View>
);
}
- TouchableOpacity 컴포넌트: https://reactnative.dev/docs/touchableopacity
- TouchableWithoutFeedback 컴포넌트: https://reactnative.dev/docs/touchablewithoutfeedback
728x90
LIST
'React & React Native' 카테고리의 다른 글
React Native Pressable (0) | 2022.02.06 |
---|---|
React & React Native Props (0) | 2022.01.13 |
React & React Native JSX (0) | 2022.01.10 |
React Native - Hello World 출력 및 환경 설정 (0) | 2022.01.09 |
React vs React Native (0) | 2021.12.28 |