๐ŸงฉExpo๋กœ Today's ToDoList ๋งŒ๋“ค๊ธฐ(1)- ๊ธฐ์ดˆํƒœ๊ทธ๋“ค์— ๋Œ€ํ•ด

eassyยท2020๋…„ 7์›” 25์ผ
0

React-Native

๋ชฉ๋ก ๋ณด๊ธฐ
2/7
post-thumbnail

React-Native์˜ ์ฒซ ์‹œ์ž‘

๊ณต๋ฐฑ๊ธฐ๋ฅผ ๊ทธ๋ƒฅ์ €๋ƒฅ ๋ณด๋‚ผ ์ˆ˜ ์—†์–ด์„œ ๋˜๋‹ค์‹œ ์ƒˆ๋กœ์šด ๋ถ„์•ผ๋ฅผ ๋ฐฐ์›Œ๋ณด๊ธฐ๋กœ ํ–ˆ๋‹ค.
๊ทธ๊ฑด ๋ฐ”๋กœ ์„ธ๋กœ๊ฐ€ ๊ธด ํ•ธ๋“œํฐํ™”๋ฉด์— ๋„์šฐ๋Š” react-native!

์ฒ˜์Œ react๋ฅผ ์‹œ์ž‘ํ•  ๋•Œ react-native๋ผ๋Š”๊ฑธ ๋“ฃ๊ธฐ๋Š” ํ–ˆ์—ˆ๋Š”๋ฐ
์„œ๋กœ๊ฐ€ ๊ฝค ๋‹ค๋ฅด๋‹ค๊ณ ๋งŒ ๋“ค์—ˆ์—ˆ๋˜ ๊ฒƒ ๊ฐ™๋‹ค.
๊ทธ๋Ÿฐ๋ฐ ์ž‘์—…์„ ํ•˜๋‹ค๋ณด๋‹ˆ ๋ญ”๊ฐ€ ๋น„์Šทํ•˜๋ฉด์„œ๋„ ๋„ˆ๋ฌด ๋‹ค๋ฅธ์ ์ด ๋งŽ์•„์„œ ์•„์ง ์–ด๋ ค์šด ๊ฒƒ ๊ฐ™๋‹คใ… ใ… 

Expo๋ฅผ ์‚ฌ์šฉํ•ด์„œ ToDoList ๋งŒ๋“ค๊ธฐ

์ฒซ ์ง„์ž…์„ ๋ณด๋‹ค ์‰ฝ๊ฒŒ ํ•˜๊ธฐ ์œ„ํ•ด์„œ expo๋ฅผ ์‚ฌ์šฉํ•ด์„œ ๋งŒ๋“ค์–ด๋ณด๋Š”์ค‘์ด๋‹ค.
์ด๋ฏธ expo์— ๋‚ดํฌ๋œ ๊ฒƒ๋“ค์ด ๊ฝค๋‚˜ ๋งŽ์•„์„œ ์‚ฌ์šฉ๋ฒ•๋งŒ ์•Œ๊ณ  ์ตํžˆ๋ฉด
react์—์„œ์˜ ๋ฌธ๋ฒ•๋“ค์„ ๊ฐ€์ง€๊ณ  ๋งŒ๋“ค ์ˆ˜ ์žˆ์„ ๊ฒƒ ๊ฐ™๋‹ค.

https://catchdream.tistory.com/173?category=829219
๋”ฐ๋ผ์„œ ์—ฐ์Šตํ•ด๋ณด์•˜์Šต๋‹ˆ๋‹ค :)

๐Ÿ“Œ ์ฃผ๋กœ ์‚ฌ์šฉ๋˜๋Š” ํƒœ๊ทธ๋“ค ์ •๋ฆฌ

react์—์„œ์™€๋Š” ๋‹ค๋ฅด๊ฒŒ ์–ด๋–ค ํƒœ๊ทธ๋ฅผ ์“ฐ๋ ค๋ฉด import๋ฅผ ํ•ด์ฃผ์–ด์•ผ์ง€๋งŒ ์‚ฌ์šฉ์ด ๊ฐ€๋Šฅํ–ˆ๋‹ค.
ํ•˜๋‹ค๋ชปํ•ด ๊ทธ๋ƒฅ ํ…์ŠคํŠธ๋ฅผ ์“ฐ๋ ค๊ณ ๋งŒ ํ•ด๋„ <Text>ํƒœ๊ทธ๊ฐ€ ํ•„์š”ํ•˜๋‹ˆ,,,
ํˆฌ๋‘๋ฆฌ์ŠคํŠธ๋ฅผ ๋”ฐ๋ผ์„œ ๋งŒ๋“ค๋‹ค๋ณด๋‹ˆ ์•Œ๊ฒŒ๋œ ํƒœ๊ทธ๋“ค ๋ช‡๊ฐ€์ง€๋ฅผ ์ •๋ฆฌํ•ด๋ณด๋ ค ํ•œ๋‹ค.

1. <Text>, <View>, <StyleSheet>

์ฒ˜์Œ ๋ฌด์–ธ๊ฐ€๋ฅผ ๋งŒ๋“ค๊ณ ์ž ํ–ˆ์„ ๋•Œ ์ œ์ผ ๊ธฐ๋ณธ์ ์œผ๋กœ ํ•„์š”ํ•œ ํƒœ๊ทธ๋“ค์ด์—ˆ๋‹ค.
์ˆœ์„œ๋Œ€๋กœ ๊ฐ„๋‹จํžˆ ๋งํ•˜์ž๋ฉด
<Text> : ํ…์ŠคํŠธ๋ฅผ ์“ธ ๋•Œ
<View> : divํƒœ๊ทธ์™€ ๋น„์Šทํ•˜๊ฒŒ ์–ด๋–ค ๋‹จ๋ฝ์„ ๋‚˜๋ˆŒ๋•Œ?
<StyleSheet> : ์Šคํƒ€์ผ์— ๋ณ€ํ˜•์„ ์ฃผ๊ธฐ ์œ„ํ•ด ํ•„์š”
์ œ์ผ ์ฒ˜์Œ ์ ‘ํ–ˆ๋˜ ํ™”๋ฉด์œผ๋กœ ์˜ˆ๋ฅผ๋“ค์–ด์„œ ์„ค๋ช…์„ ํ•˜์ž๋ฉด,

2. <Button>, <TouchableOpacity>

ํˆฌ๋‘๋ฆฌ์ŠคํŠธ๋ฅผ ๋งŒ๋“ค๋‹ค๊ฐ€, ์–ด์จ‹๋“  ๋ฒ„ํŠผ์˜ ๊ธฐ๋Šฅ์ด ํ•„์š”ํ•  ๊ฒƒ ๊ฐ™์€๋ฐ
์ „ํ˜€ ์‚ฌ์šฉ๋ฒ•์„ ๋ชจ๋ฅด๋‹ค๋ณด๋‹ˆใ…‹ใ…‹ใ…‹๐Ÿ˜“ ์ด๊ฒƒ์ €๊ฒƒ ์ฐพ์•„๋ณด๋‹ค ๋ณด๋‹ˆ ์•Œ๊ฒŒ๋œ ๋‚ด์šฉ๋“ค.
react์—์„œ์™€ ๋‹ค๋ฅด๊ฒŒ ๊ทธ๋ƒฅ ์จ์„œ๋Š” ์‚ฌ์šฉ์ด ์•ˆ๋ฌ๊ณ , ์ด๊ฒƒ๋˜ํ•œ import๋ฅผ ํ•ด์ฃผ์–ด์•ผํ–ˆ๋‹ค.

๊ทธ๋ฆฌ๊ณ  ๊ทธ๋ƒฅ <Button> ํƒœ๊ทธ๋ฅผ ์‚ฌ์šฉํ•ด์„œ๋Š” ๊ตฌํ˜„ํ–ˆ์„ ๋•Œ ๋ณด์—ฌ์ง€๋Š”๊ฒŒ
ios์—์„œ์™€ ์•ˆ๋“œ๋กœ์ด๋“œ์—์„œ ๋ณด์—ฌ์ง€๋Š”๊ฒŒ ๋‹ค๋ฅด๋‹ค๊ธฐ์—,, ๋‹ค๋ฅธ๋ฐฉ๋ฒ•์„ ์‹œ๋„.
( ๋‘๊ฐ€์ง€ ์šด์˜์ฒด์ œ์—์„œ ๋ณด์—ฌ์ง€๋Š”๊ฒŒ ๋‹ค๋ฅด๊ธฐ ๋•Œ๋ฌธ์— ์ด๊ฑธ ๋‹ค ๊ณต๋ถ€ํ•˜๋Š”๊ฒŒ ํž˜๋“ค ๋“ฏ...)

<TouchableOpacity>๋ผ๋Š” ํƒœ๊ทธ๋ฅผ ํ†ตํ•ด ๋ฒ„ํŠผ์˜ ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•ด๋‚ผ ์ˆ˜ ์žˆ์—ˆ๋‹ค.
์ด๊ฑด ๋˜ ์ด๊ณณ์„ ์ฐธ๊ณ ํ–ˆ์Šต๋‹ˆ๋‹คใ…Žใ…Žใ…Žใ…Ž ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค ์ œ ๋ฌด์ง€ํ–ˆ๋˜ ๊ธธ์„ ๋„“ํ˜€์ค๋‹ˆ๋‹ค๐Ÿ˜Ž

https://jcon.tistory.com/147

ํƒœ๊ทธ๋‚ด์—์„œ activeOpacity๋ฅผ ํ†ตํ•ด ํด๋ฆญํ–ˆ์„ ๋•Œ ๋ฐ˜์ง์ด๋Š” ์ •๋„๋„ ์กฐ์ ˆ์ด ๊ฐ€๋Šฅํ–ˆ๋‹ค.

3. <SafeAreaView>

js์˜ ๋ฌธ๋ฒ• ์ค‘, ๊ฐ€์žฅ ๊ฒ‰์— ๋ถ€๋ถ„์„ ํƒœ๊ทธ ํ•˜๋‚˜๋กœ ํฌ๊ฒŒ ๋ฌถ์–ด์ฃผ์–ด์•ผ ํ•˜๋Š” ๊ทœ์น™?๊ฐ™์€๊ฒŒ ์žˆ๋‹ค.
๊ทธ๋ž˜์„œ ํ•ญ์ƒ React์—์„œ ์ž‘์—…ํ•  ๋•Œ์—๋„ <Container>๋กœ ๋ฌถ์–ด์ฃผ๊ณค ํ–ˆ๋Š”๋ฐ
์ด๋ฒˆ์—๋„ ํ•œ ํƒœ๊ทธ๋กœ ๋ฌถ์ง€ ์•Š์•˜๋”๋‹ˆ ์—๋Ÿฌ๊ฐ€ ๋‚˜์„œ ์ฐพ์•„๋ดค๋”๋‹ˆ
๋˜ ์ƒ์†Œํ•œ ํƒœ๊ทธ ๋“ฑ์žฅ๐Ÿค”

์•ˆ์ „ ์˜์—ญ ๊ฒฝ๊ณ„ ๋‚ด์—์„œ ์ปจํ…์ธ ๋ฅผ ๋ Œ๋”๋ง ํ•˜๋Š” ๊ฒƒ์ด ๋ชฉ์ ์ธ ํƒœ๊ทธ๋‹ค.
์ด๋˜ํ•œ import๋ฅผ ํ•œ ํ›„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.


ํ‹€ ๊ตฌ์„ฑํ•˜๊ธฐ

์•„์ง react-native์— ์กด์žฌํ•˜๋Š” ์ˆ˜๋งŽ์€ ํƒœ๊ทธ๋“ค์„ ํ™œ์šฉํ•˜๊ธฐ๋„ ๋ฒ…์ฐจ์„œ
์šฐ์„ ์€ ํ˜ผ์ž ๋„์ ๋„์ ๋Œ€๊ธฐ์—” ์˜ค๋ž˜๊ฑธ๋ฆด ๊ฒƒ ๊ฐ™์•„์„œ
์œ„์— ๋งํ–ˆ๋“ฏ์ด, ๋‹ค๋ฅธ๋ถ„์ด ์ž‘์—…ํ•˜์‹  ๋ถ€๋ถ„์„ ๋”ฐ๋ผ์„œ ๋‚ด ์Šคํƒ€์ผ๋Œ€๋กœ ๋งŒ๋“ค์–ด๋ณผ ์˜ˆ์ •์ด๋‹ค.

์ดํ›„์— ์Šค์Šค๋กœ ์ž‘์—…์„ ํ•ด๋‚ด๊ธฐ ์œ„ํ•ด์„œ ๋ชจ๋“  ๊ณผ์ •์„ ํฌ์ŠคํŒ…ํ•ด๋ณผ ์˜ˆ์ •..!
๋งค ๊ณผ์ •๋งˆ๋‹ค ์‚ฌ์ง„์„ ์ฐ์–ด๋‘์ง€ ๋ชปํ–ˆ์ง€๋งŒ,,,
๊ณผ์ •๋ณ„๋กœ ํ•„์š”ํ–ˆ๋˜ ๋ถ€๋ถ„๋“ค์— ๋Œ€ํ•ด ์ •๋ฆฌํ•ด์•ผ๊ฒ ๋‹ค!
์šฐ์„  ๊ธ€์„ ์ฐธ๊ณ ํ•ด์„œ ๊ทธ๋ฆฐ ์Šค์ผ€์น˜๋Š”
์•„์ดํฐ์˜ ๋ฉ”๋ชจ์žฅ ๋ถ„์œ„๊ธฐ๋ฅผ ๋น„์Šทํ•˜๊ฒŒ ๊ตฌํ˜„ํ•ด๋ณด๊ณ  ์‹ถ์—ˆ๋‹ค.

๋” ์ž์„ธํ•œ ๋ถ€๋ถ„๋“ค์— ๋Œ€ํ•ด์„œ๋Š” ๋”ฐ๋กœ๋”ฐ๋กœ ํฌ์ŠคํŒ… ํ•  ์˜ˆ์ •!
๋‹ค์‹œ ํ•œ๋ฒˆ ์—ด์‹ฌํžˆ์ข€ ํ•ด๋ณด์ž..!

profile
์‰ฝ๊ฒŒ ์‚ฌ๋Š”๊ฑด ์žฌ๋ฏธ๊ฐ€ ์—†๋”๊ตฐ์š”, ์ƒˆ๋กœ ์‹œ์ž‘ํ•ฉ๋‹ˆ๋‹ค๐Ÿค“

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