[RN] react native ๊ทœ์น™

ch9eriยท2023๋…„ 2์›” 20์ผ
0

React Native

๋ชฉ๋ก ๋ณด๊ธฐ
2/6

1. div ์™€ ๊ฐ™์€ ํƒœ๊ทธ ์‚ฌ์šฉ ๋ถˆ๊ฐ€๋Šฅ (์›น์ด ์•„๋‹ˆ๊ธฐ ๋•Œ๋ฌธ โ—๏ธ)

-> ๐Ÿ’ก View ์‚ฌ์šฉ

import { View } from 'react-native';

+) ํŠน์ • ์—ญํ• ์„ ํ•˜์ง€ ์•Š๊ณ  ์—ฌ๋Ÿฌ๊ฐœ์˜ ์ปดํฌ๋„ŒํŠธ ๋ฐ˜ํ™˜ -> Fragment ์‚ฌ์šฉ

import { Fragment } from 'react';
// <Fragment></Fragment> == <></>

2. ๋ชจ๋“  ๋ฌธ์ž๋Š” Text ํƒœ๊ทธ ์•ˆ์— ๋“ค์–ด๊ฐ€์•ผํ•จ

import { Text } from 'react-native';
...
<Text>Hello</Text>

3. react์—์„œ ์‚ฌ์šฉํ•˜๋˜ style ์ผ๋ถ€ ์‚ฌ์šฉ ๋ถˆ๊ฐ€

ex) border ์‚ฌ์šฉ โŒ

  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    border: '1px', //err
  },

4. StyleSheet.create

(์Šคํƒ€์ผ ์ปดํฌ๋„ŒํŠธํ™”, ์ž๋™์™„์„ฑ ๊ธฐ๋Šฅ ์ œ๊ณต)

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

// ๋‹จ์ˆœ ์ปดํฌ๋„ŒํŠธํ™” (์ž๋™์™„์„ฑ ์‚ฌ์šฉ ๋ถˆ๊ฐ€)
const styles = {
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
};

5. StatusBar

์‹œ๊ณ„, ๋ฐฐํ„ฐ๋ฆฌ, ์™€์ดํŒŒ์ด ๋“ฑ์„ ์˜๋ฏธํ•œ๋‹ค.
-> react์™€๋Š” ๋‹ฌ๋ฆฌ return๋ฌธ ์•ˆ์˜ ์ผ๋ถ€ ์ปดํฌ๋„ŒํŠธ ํ™”๋ฉด์— ํ‘œ์‹œ โŒ
(๋‹จ์ˆœํžˆ ์šด์˜์ฒด์ œ์™€ ์†Œํ†ตํ•˜๊ธฐ ์œ„ํ•œ ์žฅ์น˜)

import { StatusBar } from 'expo-status-bar';
...
<StatusBar style="auto" />

6. Third Party Package

react native๊ฐ€ ์ œ๊ณตํ•˜๋Š” package๋ณด๋‹ค ๋” ์„ธ๋ถ€์ ์ธ ๊ธฐ๋Šฅ ์ œ๊ณต (ex. Async Storage)
React Native Directory -> โš ๏ธ ์ œ์ž‘์ž๊ฐ€ ๋ฒ„๊ทธ ๊ณ ์น  ๋•Œ๊นŒ์ง€ ๊ธฐ๋‹ค๋ ค์•ผํ•จ

sol) -> โœจ Expo SDK : ExpoํŒ€์ด ๋งŒ๋“  API, component ๋ชจ์Œ

profile
์ž˜ํ•˜์ž!

0๊ฐœ์˜ ๋Œ“๊ธ€