๋ณต์กํ ํ๊ทธ๋ค์ ๋ชจ์ ํ๋์ ๊ทธ๋ฃน์ผ๋ก ๋ง๋ ํ ๊ทธ ํ๊ทธ ์ฌ์ฉํ๊ธฐ.์ปดํฌ๋ํธ ๋ง๋ค๊ธฐํจ์ํ์ผ๋ก ๋ง๋ค์ด์ผ ํ๊ณ ๋๋ฌธ์๋ฅผ ์ฌ์ฉํด์ผ ํจfunction Header(){ return (๋ด์ฉ) }์ ์ํ ํ๊ทธ๋ฅผ ํ์ํ ๊ณณ์ ๊ฐ์ ธ๋ค ๋ถ์ด๊ธฐ<Header> <Header/>
์ปดํฌ๋ํธ์ ์์ฑ์ ์ฅ์ฐฉํด์ค. ๋ฆฌ์กํธ์์๋ ์์ฑ์ Props๋ผ๊ณ ๋ถ๋ฅธ๋ค.ex)<img src="image.jpg" width="100" height="100">๋ด์ฉ์ ๊ฐ์ง๊ณ ์๋ props ๋ง๋ค์ด์ฃผ๊ธฐ. function(props). \*(props)๋ object์ด
Props๋ ๋ถ๋ชจ ์ปจํฌ๋ํธ๋ก๋ถํฐ ์์ ์ปดํฌ๋ํธ์ ๋ฐ์ดํฐ๋ฅผ ๋ณด๋ผ ์ ์๋ ๋ฐฉ๋ฒ ์๋ ์์๋ก๋ App() ๋ถ๋ชจ ์ปดํฌ๋ํธ์์ ์์ ์ปดํฌ๋ํธ์๊ฒ ๋ฐ์ดํฐ๋ฅผ ๋ณด๋ด๋ ๊ฒ ์ผ๋จ ๋ฒํผ์ ๋๊ฐ ๋ง๋ค์ด๋ณผ๊น ๋ฒํผ์ด ๋๊ฐ ์๊ฒผ์ง๋ง ๋์์ธ์ด ๋๋ฌด ๊ตฌ๋ฆฌ๋ ๋์์ธ์ ๋ฃ์ด๋ณด์! SavBt
useState๋ ์๋ฃ ์ ์ฅ ๊ธฐ๋ฅ์ (๋ณ์๋ ๋น์ทํ๋ค๊ณ ๋ณด๋ฉด ๋จ)์ ์ฅํ๊ณ ์ถ์ ์๋ฃ๋ฅผ state (""); ์๊ดํธ ์์ ๋ฃ์ด์คconst title , setTitle ์ ์ฌ์ฉ ํ๋ฉด State์ ์ ์ฅ๋ ์๋ฃ๋ฅผ ๊ฐ์ ธ๋ค๊ฐ ์ธ ์ ์์\-> ์ถ๋ ฅ "๋ด์ฉ" title์ ์ถ๋ ฅ
โ๏ธ ๋ฒํผ ๊ธฐ๋ฅ ๊ฐ๋ฐํ๊ธฐ ์ข์์ ๋ฒํผ & ๊ฐฏ์ UI ๋ง๋ค๊ธฐ html์ ๋ฒํผ ์ถ๊ฐํ๊ธฐ. button ํ๊ทธ๋ ์์์๋๊น.. span ํ๊ทธ๋ก ๋ฌถ์ด์ฃผ๊ณ ๊ท์ฌ์ด ์ํฐ ์ถ๊ฐ. ๊ทธ๋ฆฌ๊ณ ์์ ์ข์์ ๊ฐฏ์ ํํํด์ฃผ๋ ๋ถ๋ถ์ 0 ์ ์ด์ฃผ๊ธฐ ๊ทผ๋ฐ ์๊ฐํด๋ณด๋ ๋ฐ๋ด์ ๊ณ์ ๋๋ฅด๋ฉด ์ซ์๊ฐ ์ฌ
์์ ๊ธ์ด 3๊ฐ ๋ค์ด์์ผ๋ฉด ๊ธ์ ๋ชฉ๋ณ๊ฒฝ('์น๋ง์ถ์ฒ', '๋ฐ์ง์ถ์ฒ', '์ํผ์ค์ถ์ฒ') ์ด๋ฐ ์์ผ๋ก ๋ณ๊ฒฝ์ด ๊ฐ๋ฅํ์ง๋ง ๋ง์ฝ 100๊ฐ๊ฐ ๋๋ ์ ํ์ด ์๋ค๋ฉด ๋ง๋ง..๊ทธ๋ฌ๋ ๊ธฐ์กด state๋ฅผ ๋ค ๋ณต๋ถํ์ง ๋ง๊ณ ๊ธฐ์กด state ์ฒซ ๊ธ์๋ง ์ด์ง ๋ฐ๊ฟ์ state๋ณ๊ฒฝํจ์์ ์ง์ด๋ฃ๋
๋๊ฐ์ด ์๊ธด UI๋ค์ ๋ฐ๋ณต๋ฌธ์ผ๋ก ์ค์ฌ์ฃผ๋ ๋ฐฉ๋ฒ๋ชจ๋ array ์๋ฃ์๋ ์ด๋ ๊ฒ map์ ๋ถ์ผ ์ ์์. ๊ธฐ๋ณธ ํจ์๋ผ ์๊ฐํ๋ฉด ๋จ๊ทธ๋ฆฌ๊ณ ๊ทธ ๋ค์๋ ์ฝ๋ฐฑ ํจ์๋ฅผ ๋ฃ์ด์ค์ด๋ ค์ด๊ฑด ์๋๊ณ .. ๊ทธ๋ฅ ์๊ดํธ ์์ ๋ค์ด๊ฐ๋ ํจ์๋ค์ ์ ๋ถ ๋ค ์ฝ๋ฐฑ ํจ์๋ผ๊ณ ํจ๊ทธ๋์ ์ด๊ฒ ์ด๋ค ์ญํ ์ ํจ
์์์ด ๋ถ๋ชจ์ state ๊ฐ์ ธ๋ค ์ฐ๊ณ ์ถ์ ๋๋ props๋ฅผ ์ฌ์ฉํ๋ฉด ๋จ.ํจ์ ์์์ ๋ง๋ ๋ชจ๋ ๋ณ์๋ ํจ์ ํ์ถ ๋ถ๊ฐ์..๊ทธ๋์ ์๋ a๋ผ๋ ๋ณ์๋ ๋ค๋ฅธ ํจ์์์ ๊ฐ์ ธ๋ค ์ธ ์ ์์์ด ๋ props ๋ฌธ๋ฒ ์ฐ๋ฉด ๊ฐ๋ฅApp ์ปดํฌ๋ํธ ์์ Modal ์ปดํฌ๋ํธ๊ฐ ์๋ ์ํฉ.
return์์๋
input ํ๊ทธ์ number ํ์ ์์ maxlength๊ฐ ๋จนํ์ง ์๋๋ค ๐ง์์นํ ์ฐพ์ ๋ฐฉ๋ฒ!input์ ์๋ ์ฝ๋๋ฅผ ์ถ๊ฐํ ๋ค maxlength={ }๋ฅผ ์ ๋ ฅํด์ฃผ๋ฉด ๋๋ค. ์ต์ข ์ฝ๋์์ฑ!
๐ป useEffect๋ ์ธ์ ์ฌ์ฉํ ๊น? ์ด๋ ํ ์ปดํฌ๋ํธ๊ฐ ๋ง์ดํธ(ํ๋ฉด์ ์ฒซ ๋ ๋๋ง) ๋์์ ๋, ์ ๋ฐ์ดํธ(๋ค์ ๋ ๋๋ง) ๋์์ ๋, ์ธ๋ง์ดํธ(ํ๋ฉด์์ ์ฌ์ง ๋) ๋์์ ๋ ํน์ ์์ ์ ์ฒ๋ฆฌํ ์ฝ๋๋ฅผ ์คํ์์ผ์ฃผ๊ณ ์ถ๋ค๋ฉด useEffect๋ฅผ ์ฌ์ฉํ๋ฉด ๋จ ๐ป useEf
๋ฉด์ ์ ๋ณด๋ฉฐ Native๋ฅผ ์จ๋ด์ผ๊ฒ ๋ค๋ ์๊ฐ์ด ํฌ๊ฒ ๋ค์๋ค.๐ค ํ๋ก์ ํธ ์ฝ๋ ๋ฆฌ๋ทฐ๋ ํ๊ณ ์๊ณ ์๊ฐ์ด ๋ถ์กฑํ๋ค ๋ถ์กฑํด.. ๋ค์ดํฐ๋ธ๋ฅผ ๋น ๋ฅด๊ฒ ์ฌ์ฉํด๋ณด๊ณ ์ถ์ ๋ง์์ VSCode๋ฅผ ์ฌ์ฉํ์ฌ ํ๊ฒฝ์ค์ ์ ํ์๋ค. ํ ์คํธ์ฉ์ผ๋ก ์งํ ํ๋ ๋ฐฉ๋ฒ์ด๋ผ๋๋ฐ ํ๋ฑ ์ฐ์ด๋จน์ด๋ณด๊ณ ์๋ฎฌ๋ ์ดํฐ
native์ ๊ธฐ๋ณธ ์ฝ๋ ๊ตฌ์ฑ. ์ฒ์ ๋ณด๋ View, Text, StatusBar, StyleSheetViewreact native๋ ์น์ฌ์ดํธ๊ฐ ์๋๊ธฐ ๋๋ฌธ์ div ๋์ View๋ฅผ ์ฌ์ฉํด์ผ ํ๋ค. (div ์ฐ๋ฉด ์๋ฌ ํกํก)View๋ container๋ผ๊ณ ์๊ฐํ๋ฉด ๋๋ค
https://www.reactnative.dev/React native documentation์ ์ฐพ์ ์ ์๋ ์ฌ์ดํธ. ์๋จ Development ์นดํ ๊ณ ๋ฆฌ์์ Component ๋ฅผ ํด๋ฆญํ๋ฉด Core Components๋ฅผ ํ์ธํ ์ ์๋ค.์ผ์ชฝ ๋ฆฌ์คํธ๋ฅผ ๋ณด๋ฉด
๊ถ๊ธ์ฆ : React Native ๊ธฐ๋ณธ ์ฝ๋์ Expo StatusBar์ React Native StatusBar๊ฐ ์ ์์๊น? StatusBar๊ฐ ๋๊ฐ๊ฐ ์๋๊ฒ ๊ถ๊ธํ๋ค.์ด์ ๋ Expo๊ฐ react native์ ์ผ๋ถ components์ APIs๋ฅผ ๋ณต์ ํ๊ณ ๊ฐ์ ํ
react native ์ ๋ณต๊ธฐ. Layout System์ ๋ํด ๊ณต๋ถํด๋ณด์-RN์์ ๋ ์ด์์์ ๋ง๋ค๋ ค๋ฉด Flexbox๋ฅผ ์ฌ์ฉํด์ผ ํ๋ค. flexbox ๋ณต์ตํ ๊ณํ์ด์๋๋ฐ ์ด๋ ๊ฒ ๋ค์ ํ๋ฒ ๊ณต๋ถํ๊ฒ ๋๋๊ตฌ๋๋ช๊ฐ์ง ์์ธ๋ฅผ ์ ์ธํ๋ฉด React Native์ flexbox๋
์ปดํฌ๋ํธ ๋ด๋ถ์์ ์ฝ๋๋ฅผ ์์ฑํ๋ค.์ปดํฌ๋ํธ์ ํ๋ผ๋ฏธํฐ์์ {}์์ ๋ฐ๋ ๋ด์ฉ์ ๋ฏธ๋ฆฌ ํ๊ธฐํ๋ค.์ปดํฌ๋ํธ ํ๊ทธ ์ฌ์ด์ ๊ฐ์ด ์์๋ 'children'์ด๋ ์์ฝ์ด๋ฅผ ์ฌ์ฉํ๋ค.
Drawer Navigator์ Left side๊ฐ default์ด๋ค.์ค๋ฅธ์ชฝ์ผ๋ก ๋ฐ๊พธ๊ณ ์ถ์ด์drawerPosition: 'right' ์ ํด์ฃผ์๋๋ ์์ ํ๋ฒ๊ฑฐ ์์ด์ฝ์ ๊ทธ๋๋ก ์ผ์ชฝ์ ์๊ณ ์ด๋ฆฌ๋ ๊ฒ๋ง ์ค๋ฅธ์ชฝ์์ ์ด๋ฆฌ๊ฒ ๋จ.DrawerToggleButton์ impo
iOS์์๋ ์คํฌ๋กค์ด ์ ๋ด๋ ค๊ฐ๋๋ฐ Android์์ ์์ฒญ ์ฒ์ฒํ ์คํฌ๋กค์ด ๋๋ค. ์ฃ์ผ ๋ด๋ ค์ผํจ.๊ฒ์ํ๋ค TouchableWithoutFeedback ๋ก ๋ฌถ์ด์ฃผ๋ฉด ๋๋ค๋ ์ ๋ณด ์ ์.์๋จ์ import๋ ๊ผญ ํด์ฃผ๊ธฐ!import {TouchableWithoutFeedbac